การกำหนดตำแหน่งจุดยึด

เมื่อวางเคล็ดลับเครื่องมือหรือเมนูแบบเลื่อนลง คุณมักต้องการวางตำแหน่งให้สัมพันธ์กับองค์ประกอบอื่นในหน้าเว็บ แม้ว่าจะมีวิธีใช้การวางตำแหน่งแบบสัมบูรณ์เพื่อให้ได้เอฟเฟกต์นี้ แต่ข้อกำหนดที่ซับซ้อนกว่านั้นมักต้องใช้ JavaScript ในการวางตำแหน่งรายการ

การวางตําแหน่งยึด CSS เป็นวิธีประกาศตําแหน่งองค์ประกอบให้สัมพันธ์กับองค์ประกอบอื่น

การเชื่อมต่อองค์ประกอบ

หากต้องการให้องค์ประกอบเป็นจุดยึด ให้กำหนดanchor-nameค่าเป็นสตริงใดก็ได้ที่ขึ้นต้นด้วยขีด 2 ขีด ตัวระบุนี้เป็นตัวระบุที่องค์ประกอบที่วางตำแหน่งจะใช้เพื่อค้นหาจุดยึด และการตั้งชื่อที่สื่อความหมายจะเป็นประโยชน์ คุณยังตั้งชื่อ Anchor หลายชื่อให้กับองค์ประกอบได้ด้วย หากจะใช้เป็น Anchor ในรูปแบบต่างๆ

คุณจะต้องตั้งค่าพร็อพเพอร์ตี้ 2-3 รายการในองค์ประกอบที่วางตำแหน่งเพื่อให้เชื่อมโยงได้ ก่อนอื่น คุณต้องดึงองค์ประกอบออกจากโฟลว์ของเอกสารเพื่อให้ลอยได้โดยการตั้งค่า position: absolute หรือ position: fixed

จากนั้นคุณจะต้องตั้งค่าว่าต้องการเชื่อมต่อกับสมอใดโดยตั้งค่า position-anchor เป็นชื่อสมอที่คุณตั้งค่าไว้ในสมอ

สุดท้าย คุณจะต้องกำหนดวิธีวางตำแหน่งสมอ คุณจะได้ดูข้อมูลเพิ่มเติมเกี่ยวกับ position-area ในภายหลังของโมดูลนี้

#anchor {
   anchor-name: --my-anchor;
}

#positionedElement {
     position: absolute;
     position-anchor: --my-anchor;
     position-area: end;
}

การเชื่อมต่ออินเทอร์เน็ตผ่านมือถือโดยนัย

ป๊อปโอเวอร์ยึดได้ง่ายยิ่งกว่า เมื่อเปิดป๊อปโอเวอร์โดยใช้ปุ่มที่มี popovertarget หรือโดยการตั้งค่า source ด้วย showPopover({source}) ป๊อปโอเวอร์จะมี "Anchor โดยนัย" ที่ตั้งค่าไว้แล้ว เนื่องจากป๊อปโอเวอร์ลอยอยู่กับ position: fixed โดยค่าเริ่มต้น สิ่งที่คุณต้องทำเพื่อจัดตำแหน่งป๊อปโอเวอร์คือตั้งค่าตำแหน่ง

#anchor{}

#positionedElement {
  position-area: end;
  margin: unset;
}

การกำหนดขอบเขตของ Anchor ที่อาจเกิดขึ้น

คุณอาจใช้การวางตำแหน่งจุดยึดเป็นส่วนหนึ่งของคอมโพเนนต์ เพื่อให้ใช้รูปแบบต่างๆ เช่น เมนูแบบเลื่อนลง ในหลายๆ ที่ได้ หากคุณใช้ anchor-name หลายครั้ง คุณจะแน่ใจได้อย่างไรว่าองค์ประกอบที่วางตำแหน่งแต่ละรายการพบจุดยึดที่ถูกต้อง

โซลูชัน JavaScript เกี่ยวข้องกับการเพิ่มรหัสที่ไม่ซ้ำกันให้กับแต่ละ Anchor จากนั้นอ้างอิงจากองค์ประกอบที่วางตำแหน่ง ซึ่งเป็นเรื่องที่ยุ่งยาก และ CSS มีโซลูชันที่ง่ายกว่าด้วย anchor-scope

พร็อพเพอร์ตี้ anchor-scope จะกำหนดชื่อ Anchor ที่จะจับคู่เฉพาะในองค์ประกอบและองค์ประกอบย่อย โดยจะรับรายการชื่อจุดยึดอย่างน้อย 1 รายการหรือคีย์เวิร์ด all เพื่อจำกัดขอบเขตของชื่อจุดยึดที่กำหนดทั้งหมด

โดยปกติแล้วควรเพิ่ม anchor-scope ให้กับองค์ประกอบระดับบนสุดของทั้งองค์ประกอบที่วางตำแหน่งและองค์ประกอบยึดตำแหน่งซึ่งไม่มีองค์ประกอบยึดตำแหน่งอื่นๆ ที่มีชื่อเดียวกัน ซึ่งมักจะอยู่ในรูทของคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้

ตัวอย่างต่อไปนี้แสดงความแตกต่างที่ anchor-scope สร้างขึ้นเมื่อใช้กับองค์ประกอบที่ซ้ำกันซึ่งมี anchor-name เดียวกัน ในตัวอย่างนี้ องค์ประกอบ <img> ทั้งหมดและแบนเนอร์รูปภาพอ้างอิง--imageชื่อ Anchor เมื่อใช้ anchor-scope กับองค์ประกอบ <li> position-anchor: --image จะตรงกับองค์ประกอบ <img> ภายในองค์ประกอบ <li> เดียวกันกับแบนเนอร์เท่านั้น ไม่เช่นนั้นจะตรงกับ <img> ที่แสดงผลล่าสุด

การอธิบายหัวข้อต่างๆ แก่ลูกค้า

เมื่อเชื่อมโยงองค์ประกอบกับจุดยึดแล้ว ก็ถึงเวลาจัดตำแหน่ง การวางตำแหน่ง Anchor มี 2 วิธีในการวางตำแหน่ง ได้แก่ position-area และฟังก์ชัน anchor()

position-area

พร็อพเพอร์ตี้ position-area ช่วยให้คุณจัดตำแหน่งองค์ประกอบรอบจุดยึดได้โดยการระบุคีย์เวิร์ด 1 หรือ 2 คำ ซึ่งครอบคลุม Use Case ทั่วไปหลายอย่างและมักเป็นจุดเริ่มต้นที่ดี

วิธีการทำงานของ position-area

position-area ทำงานโดยการสร้างบล็อกใหม่ที่มีองค์ประกอบที่วางตำแหน่งในพื้นที่ที่สร้างขึ้นจากขอบของ Anchor และบล็อกที่มีองค์ประกอบที่วางตำแหน่งเดิม

แม้ว่าจะมีคีย์เวิร์ดมากมายสำหรับ position-area แต่ก็สามารถแบ่งออกเป็น 2-3 หมวดหมู่เพื่อให้เข้าใจได้ง่ายขึ้น Anchor-tool.com เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสำรวจไวยากรณ์

คีย์เวิร์ดทางกายภาพ

คุณใช้คีย์เวิร์ดจริง top, left, bottom, right และ center ได้ เช่น position-area: top right จะวางองค์ประกอบที่กำหนดตำแหน่งไว้เหนือและทางขวาของจุดยึด คีย์เวิร์ดเหล่านี้ยังมีแกนทางกายภาพที่เทียบเท่ากันด้วย ได้แก่ y-start, x-start, y-end และ x-end

คีย์เวิร์ดเชิงตรรกะ

นอกจากนี้ คุณยังใช้คีย์เวิร์ดเชิงตรรกะ block-start, block-end, inline-start และ inline-end ได้ด้วย เช่น position-area: block-end inline-start จะวางองค์ประกอบที่กำหนดตำแหน่งไว้ใต้และทางซ้ายของจุดยึดในภาษาต่างๆ เช่น ภาษาอังกฤษ หรือหลังจุดยึดในแกนบล็อกและก่อนจุดยึดในแกนอินไลน์ในโหมดการเขียนของเอกสาร center ยังใช้กับคีย์เวิร์ดเชิงตรรกะได้ด้วย

นอกจากนี้ คุณยังละเว้นแกนได้หากระบุคีย์เวิร์ดเชิงตรรกะ โดยมีแกนระดับบล็อกเป็นอันดับแรกและแกนระดับอินไลน์เป็นอันดับที่สอง position-area: start end เหมือนกับ position-area: block-start inline-end หรือ position-area: inline-end block-start

ครอบคลุมพื้นที่กริดหลายแห่ง

ที่ผ่านมา คุณอาจสังเกตเห็นว่าตัวเลือกเหล่านี้อนุญาตให้คุณวางองค์ประกอบที่กำหนดตำแหน่งภายในพื้นที่กริดเดียวเท่านั้น การเพิ่มคำนำหน้า span ให้กับพร็อพเพอร์ตี้ทางกายภาพหรือเชิงตรรกะจะเพิ่มพื้นที่กริดกลางที่อยู่ติดกัน position-area: span-top right จะอยู่ทางด้านขวาของจุดยึด และจากด้านล่างของจุดยึดไปยังด้านบนของบล็อกที่มีองค์ประกอบที่จัดตำแหน่งเดิม

ตำแหน่งทั่วไปของเมนูแบบเลื่อนลงคือ position-area: block-end span-inline-end

span-all คีย์เวิร์ดครอบคลุม 3 แถวหรือคอลัมน์

คีย์เวิร์ดเดียว

หากตั้งค่าคีย์เวิร์ดเพียงรายการเดียว ระบบจะตั้งค่าแกนอื่นๆ โดยอัตโนมัติ โดยส่วนใหญ่แล้วฟีเจอร์นี้จะทำงานตามที่คุณคาดหวัง แต่การทำความเข้าใจวิธีการทำงานก็อาจมีประโยชน์

หากคีย์เวิร์ดที่ระบุมีความชัดเจนเกี่ยวกับแกนหนึ่ง ระบบจะคำนวณแกนอีกแกนเป็น span-all ซึ่งหมายความว่า position-area: bottom จะเทียบเท่ากับ position-area: bottom span-all และองค์ประกอบที่วางตำแหน่งจะอยู่ใต้จุดยึดและมีความกว้างทั้งหมดของบล็อกที่ครอบคลุม

ในทางกลับกัน หากคีย์เวิร์ดไม่ได้ระบุแกนอย่างชัดเจน ระบบจะทำซ้ำ position-area: start เทียบเท่ากับ start start และจะอยู่ที่ด้านซ้ายบนของจุดยึดในภาษาที่อ่านจากซ้ายไปขวา

ฟังก์ชัน anchor()

สำหรับกรณีการใช้งานขั้นสูง position-area อาจไม่ตรงตามข้อกำหนดของคุณ ฟังก์ชัน anchor() ช่วยให้คุณตั้งค่าพร็อพเพอร์ตี้ระยะขอบแต่ละรายการตามตำแหน่งขององค์ประกอบอื่นได้ ซึ่งจะแปลงเป็นความยาว CSS ซึ่งหมายความว่าคุณสามารถใช้ในการคำนวณและใช้กับฟังก์ชัน CSS อื่นๆ ได้ นอกจากนี้ คุณยังเชื่อมโยงด้านต่างๆ กับจุดยึดที่แตกต่างกันได้ด้วย

ฟังก์ชัน anchor() จะใช้ชื่อและด้านของจุดยึด หากองค์ประกอบมีแองเคอร์เริ่มต้นที่ตั้งค่าด้วย position-anchor หรือโดยนัย เช่น ป๊อปโอเวอร์ คุณก็ละชื่อแองเคอร์ได้

.positionedElement {
  block-start: anchor(--my-anchor start);
  /*  OR  */
  position-anchor: --my-anchor;
  block-start: anchor(start);
}

ค่าสำรอง

หากไม่พบจุดยึดสำหรับฟังก์ชัน anchor() ประกาศทั้งหมดจะใช้งานไม่ได้ กรณีนี้อาจเกิดขึ้นหากมีการแสดงผลจุดยึดหลังจากองค์ประกอบที่วางตำแหน่ง หรือหากไม่มีองค์ประกอบที่มี anchor-name ที่ตรงกัน คุณสามารถกำหนดความยาวหรือเปอร์เซ็นต์สำรองเพื่อจัดการกับปัญหานี้ได้

.positionedElement {
   block-start: anchor(--my-anchor, 100px)
}

ในตัวอย่างก่อนหน้า ค่าด้านซ้ายขององค์ประกอบที่กำหนดตำแหน่งจะยึดตาม --focused-anchor แต่ anchor-name จะมีอยู่ก็ต่อเมื่อมีการวางเมาส์หรือโฟกัสปุ่มแรกเท่านั้น เนื่องจากanchor()ฟังก์ชันจะเปลี่ยนเป็นความยาว คุณจึงใช้จุดยึดอื่นเป็นตัวสำรองได้ หากเราไม่ได้ระบุการสำรองไว้ องค์ประกอบที่วางตำแหน่งไว้ก็จะไม่ได้รับการวางตำแหน่ง

คีย์เวิร์ดด้าน Anchor

ค่าด้านข้างของ Anchor จะเลือกขอบของ Anchor ที่จะวางตำแหน่งเทียบกับ ค่าด้านข้างของจุดยึดรองรับไวยากรณ์หลายประเภท ซึ่งคล้ายกับ position-area

ตัวอย่างนี้แสดงให้เห็นว่าค่าเปอร์เซ็นต์จะเริ่มจากจุดเริ่มต้นไปจนถึงจุดสิ้นสุดบนแกนที่ระบุเสมอ

กำลังใช้ anchor()

เนื่องจาก anchor() เป็นความยาว จึงมีความยืดหยุ่นสูง คุณสามารถจัดการค่าด้วยฟังก์ชัน CSS เช่น max() และ calc()

ข้อจำกัดอย่างหนึ่งคือคุณใช้ฟังก์ชัน anchor() ได้เฉพาะในพร็อพเพอร์ตี้ที่แทรกเท่านั้น

ตัวอย่างก่อนหน้าจะเพิ่มพื้นหลังด้านหลังแผงรายละเอียดที่เปิดอยู่ ซึ่งจะเคลื่อนไหวอย่างราบรื่นเมื่อเปิดแผงอื่น และขยายเพื่อให้ครอบคลุมแผงรายละเอียดที่วางเมาส์ โดยจะใช้ min() เพื่อเลือกความยาวที่สั้นกว่าระหว่างจุดยึด 2 จุด

#indicator{
/*  Use the smaller of the 2 values:  */
  inset-block-start: min(
/*   1. The start side of the default anchor, which is the open `<details>` element  */
    anchor(start),
/*   2. The start side of the hovered `<details>` element.    */
    anchor(--hovered start,
/*     If no `<details>` element is hovered, this falls back to infinity px, so that the other value is smaller, and therefore used.   */
       var(calc(1px * infinity)))
  );
}

ตัวอย่างยังใช้ calc() เพื่อเพิ่มช่องว่างในบรรทัดรอบแผงที่เปิดอยู่ด้วย

การใช้ขนาดของจุดยึด

นอกจากนี้ คุณยังใช้ฟังก์ชัน anchor-size() เพื่อใช้ขนาดขององค์ประกอบยึดสำหรับขนาด ตำแหน่ง หรือระยะขอบขององค์ประกอบที่วางตำแหน่งได้ด้วย

anchor-size() ใช้ชื่อ Anchor หรือใช้ Anchor เริ่มต้น โดยค่าเริ่มต้น ฟังก์ชันจะใช้ขนาดของจุดยึดในแกนที่ใช้ ดังนั้น width: anchor-size() จะแสดงผลความกว้างของจุดยึด คุณยังใช้แกนอื่นๆ ได้ด้วยการระบุความยาวที่ต้องการด้วยคีย์เวิร์ดจริง width และ height หรือคีย์เวิร์ดเชิงตรรกะ block, inline, self-block และ self-inline

การจัดการข้อความที่ยาวเกิน

คุณสร้างคอมโพเนนต์เมนูแบบเลื่อนลงและใช้การวางตำแหน่งจุดยึดเพื่อวางเมนูแบบเลื่อนลงในตำแหน่งที่ต้องการ แต่จากนั้นคุณย้ายเมนูไปอีกด้านหนึ่งของหน้าจอ หรือใช้เมนูสำหรับเมนูผู้ใช้ และชื่อของผู้ใช้ยาวเกินไป จู่ๆ เมนูแบบเลื่อนลงก็หายไปจากหน้าจอ ฉันควรทำอย่างไรต่อไป

การวางตำแหน่งยึด CSS มีระบบในตัวที่ช่วยให้คุณสร้างชุดการทำงานสำรองที่แข็งแกร่งได้อย่างรวดเร็วเมื่อองค์ประกอบที่วางตำแหน่งอยู่นอกบล็อกที่ประกอบ

ตัวเลือกสำรอง

position-try-fallbacks กฎจะใช้รายการตัวเลือกสำรอง เมื่อตำแหน่งเริ่มต้นล้น ระบบจะลองใช้แต่ละตัวเลือกตามลำดับจนกว่าจะพบตำแหน่งที่ไม่ล้น

คุณใช้ค่า position-area ใดก็ได้เป็นตัวเลือกสำรอง ในตัวอย่างนี้ ในโหมดการเขียนจากซ้ายไปขวา เช่น ภาษาอังกฤษ องค์ประกอบที่วางตำแหน่งจะพยายามวางตำแหน่งที่ด้านล่างของจุดยึด โดยครอบคลุมคอลัมน์ตรงกลางและด้านขวา หากมีเนื้อหามากเกินไป ระบบจะพยายามวางไว้ที่ด้านล่างของจุดยึด โดยครอบคลุมคอลัมน์ด้านซ้ายและตรงกลาง หากตำแหน่งนั้นล้นเช่นกัน ตำแหน่งจะเปลี่ยนกลับเป็นตำแหน่งเริ่มต้น แม้ว่าตำแหน่งนั้นจะล้นก็ตาม

.positioned-element {
  position-area: block-end span-inline-end;
  position-try-fallbacks: block-end span-inline-start;
}

นอกจากนี้ยังมีflip-คีย์เวิร์ดหลายคำที่จัดการกรณีการทำงานสำรองทั่วไป flip-block และ flip-inline ลองพลิกองค์ประกอบเหนือแกนบล็อกและแกนอินไลน์ นอกจากนี้ยังใช้ร่วมกับ flip-block flip-inline เพื่อพลิกทั้ง 2 แกนได้ด้วย ค่า flip-start จะพลิกองค์ประกอบที่วางตำแหน่งเหนือเส้นทแยงมุมจากมุมเริ่มต้นไปยังมุมสิ้นสุดของจุดยึด

นอกจากนี้ คุณยังสร้างตัวเลือกสำรองที่กำหนดเองได้ด้วย @position-try ซึ่งช่วยให้คุณตั้งค่าระยะขอบ การจัดแนว และแม้แต่เปลี่ยนจุดยึดได้

@position-try --menu-below {
  position-area: bottom span-right;
  margin-top: 1em;
}

#positioned-element {
  position-try: --menu-below;
}

คุณเพิ่ม flip-block และ flip-inline ลงใน@position-try ตัวเลือกสำรองเพื่อสร้างตัวแปรได้

#positioned-element {
  position-try: --menu-below, flip-inline --menu-below;
}

ในตัวอย่างก่อนหน้า เบราว์เซอร์จะทำตามขั้นตอนเหล่านี้และหยุดทันทีที่พบโซลูชันที่ไม่ล้น

1. วางองค์ประกอบโดยมี position-area: end ที่ด้านล่างขวาของจุดยึด
2. หากข้อความยาวเกินไป ระบบจะวางองค์ประกอบด้วยตัวเลือกสำรองที่กำหนดเองชื่อ --bottom-span-right ซึ่งจะวางองค์ประกอบด้วย position-area: bottom span-right โดยมีระยะขอบเพิ่มเติมด้านล่าง
3. หากข้อความล้น องค์ประกอบจะวางด้วย flip-inline --bottom-span-right ซึ่งรวมตัวเลือกสำรองที่กำหนดเองกับ flip-inline ซึ่งก็คือ position-area: bottom span-left
4. หากมีเนื้อหาเกิน องค์ประกอบจะวางโดยใช้--use-alternateตัวเลือกสำรองที่กำหนดเอง ซึ่งจะวางไว้ใต้จุดยึดที่แตกต่างกันโดยสิ้นเชิง
5. หากเนื้อหาล้น องค์ประกอบจะเปลี่ยนกลับไปใช้ตำแหน่งเดิมที่มี position-area: end แม้ว่าจะเป็นที่ทราบกันดีว่าเนื้อหาจะล้นก็ตาม

ลำดับสำรอง

โดยค่าเริ่มต้น เมื่อตำแหน่งเริ่มต้นล้น เบราว์เซอร์จะลองแต่ละตัวเลือกใน position-try-fallbacks จนกว่าจะพบตำแหน่งที่ไม่ล้น คุณลบล้างลักษณะการทำงานนี้ได้ด้วย position-try-order เพื่อทดสอบตัวเลือกสำรองแต่ละรายการ และใช้ตัวเลือกที่มีพื้นที่มากที่สุดในแกนที่ระบุ

คุณระบุแกนได้ด้วยคีย์เวิร์ดเชิงตรรกะ most-block-size และ most-inline-size หรือด้วยคีย์เวิร์ดทางกายภาพ most-height และ most-width

position-try-order และ position-try-fallbacks สามารถใช้ร่วมกับรูปแบบย่อ position-try โดยให้ลำดับความสำคัญกับคำสั่งซื้อก่อน

กำลังเลื่อน

เมื่อผู้ใช้เลื่อนหน้าเว็บ ผู้ใช้คาดหวังให้หน้าเว็บเลื่อนได้อย่างราบรื่น เบราว์เซอร์จึงมีข้อจำกัดเกี่ยวกับวิธีใช้การวางตำแหน่งของจุดยึดเมื่อเลื่อน

แม้ว่าคุณจะเชื่อมโยงองค์ประกอบที่วางตำแหน่งกับจุดยึดในคอนเทนเนอร์การเลื่อนต่างๆ ได้ แต่องค์ประกอบจะเลื่อนตามการเลื่อนของจุดยึดเพียงจุดเดียวเท่านั้น นี่จะเป็นจุดยึดเริ่มต้น ซึ่งอาจเป็นจุดยึดโดยนัยจากป๊อปโอเวอร์ หรือค่าของ position-anchor

คุณจะเห็นว่าองค์ประกอบที่วางตำแหน่งจะยังคงแสดงอยู่แม้ว่าจะเลื่อนจุดยึดออกนอกมุมมองแล้วก็ตาม หากต้องการซ่อนองค์ประกอบที่วางตำแหน่งเมื่อซ่อนจุดยึด ให้ตั้งค่า position-visibility: anchors-visible ซึ่งไม่เพียงใช้ได้เมื่อเลื่อนจุดยึดเกินเท่านั้น แต่ยังใช้ได้ในกรณีที่ซ่อนจุดยึดด้วยวิธีอื่นๆ เช่น visibility: hidden ด้วย

ทดสอบความเข้าใจ