ดัชนี Z และบริบทแบบเรียงซ้อน

พอดแคสต์ CSS - 019: ดัชนี z และบริบทซ้อน

สมมติว่าคุณมีองค์ประกอบ 2 อย่างที่อยู่ในตำแหน่งสัมบูรณ์ และควรวางตำแหน่งซ้อนทับกัน คุณอาจเขียน HTML สักเล็กน้อยในลักษณะนี้

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

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

ดัชนีลำดับ Z

พร็อพเพอร์ตี้ z-index จะกำหนดลำดับเลเยอร์สำหรับ HTML อย่างชัดเจนโดยอิงตามพื้นที่ 3 มิติของเบราว์เซอร์ ซึ่งก็คือแกน Z นี่คือแกนที่แสดงเลเยอร์ที่อยู่ใกล้และไกลออกไปจากตัวคุณ แกนแนวตั้งในเว็บคือแกน Y และแกนแนวนอนคือแกน X

พร็อพเพอร์ตี้ z-index ยอมรับค่าตัวเลขซึ่งอาจเป็นจำนวนบวกหรือลบก็ได้ องค์ประกอบจะปรากฏเหนือองค์ประกอบอื่นหากมีค่า z-index สูงกว่า หากไม่มีการตั้งค่า z-index ในองค์ประกอบ ลักษณะการทำงานเริ่มต้นคือลำดับแหล่งที่มาของเอกสารจะกำหนดแกน Z ซึ่งหมายความว่าองค์ประกอบที่อยู่ต่ำลงมาในเอกสารจะอยู่ด้านบนขององค์ประกอบที่อยู่ก่อนหน้า

ในขั้นตอนปกติ หากคุณกำหนดค่าเฉพาะให้กับ z-index และค่าดังกล่าวไม่ทำงาน คุณต้องตั้งค่า position ขององค์ประกอบเป็นค่าอื่นที่ไม่ใช่ static นี่เป็นสถานที่ทั่วไปที่ผู้คนมีปัญหากับ z-index

แต่ในกรณีนี้จะไม่เป็นเช่นนั้น หากคุณอยู่ในบริบท Flexbox หรือตารางกริด เนื่องจากคุณปรับเปลี่ยนดัชนี z ของรายการ Flex หรือตารางกริดได้โดยไม่ต้องเพิ่ม position: relative

ดัชนีลำดับ Z ติดลบ

หากต้องการตั้งค่าองค์ประกอบด้านหลังองค์ประกอบอื่น ให้ใส่ค่าลบสำหรับ z-index

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

ตราบใดที่ .my-element มีค่าเริ่มต้นสำหรับ z-index เป็น auto องค์ประกอบ .child จะอยู่ด้านหลัง

เพิ่ม CSS ต่อไปนี้ลงใน .my-element และองค์ประกอบ .child จะอยู่หลังองค์ประกอบนี้

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

เนื่องจากตอนนี้ .my-element มีค่า position ที่ไม่ใช่ static และค่า z-index ที่ไม่ใช่ auto จึงสร้างบริบทการซ้อนใหม่ ซึ่งหมายความว่าแม้ว่าคุณจะตั้งค่า .child มี z-index เป็น -999 แต่ระบบก็จะยังคงตาม .my-parent อยู่

บริบทแบบซ้อน

บริบทแบบซ้อนคือกลุ่มองค์ประกอบที่มีระดับบนสุดเดียวกันและเลื่อนขึ้นและลงในแกน z พร้อมกัน

ในตัวอย่างนี้ องค์ประกอบระดับบนสุดแรกมี z-index เป็น 1 ดังนั้นจึงสร้างบริบทการกองซ้อนใหม่ องค์ประกอบย่อยขององค์ประกอบมี z-index เป็น 999 ข้างๆ ระดับบนสุดนี้มีองค์ประกอบหลักอีก 1 รายการที่มีย่อย 1 รายการ องค์ประกอบระดับบนมี z-index เป็น 2 และองค์ประกอบย่อยยังมี z-index เป็น 2 ด้วยเช่นกัน เนื่องจากผู้ปกครองทั้งสองคนสร้างบริบทแบบซ้อนกัน z-index ของรายการย่อยทั้งหมดจึงอิงตามบริบทของผู้ปกครอง

z-index ขององค์ประกอบภายในบริบทแบบซ้อนจะสัมพัทธ์กับลำดับปัจจุบันของระดับบนสุดในบริบทการกองซ้อนของตัวเองเสมอ

การสร้างบริบทแบบซ้อน

คุณไม่จำเป็นต้องใช้ z-index และ position เพื่อสร้างบริบทการกองซ้อนใหม่ คุณสร้างบริบทการซ้อนใหม่ได้ด้วยการเพิ่มค่าสำหรับพร็อพเพอร์ตี้ที่สร้างเลเยอร์ผสมใหม่ เช่น opacity, will-change และ transform ดูรายการที่พักทั้งหมดได้ที่นี่

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

เบราว์เซอร์จะสร้างเลเยอร์ประกอบใหม่ซึ่งวางซ้อนอยู่ด้านบนผืนผ้าใบเพื่อช่วยเพิ่มประสิทธิภาพ ซึ่งก็คล้ายกับโน้ตหลังโพสต์อิต กล่าวคือ ย้ายไปรอบๆ แล้วเปลี่ยนไปเรื่อยๆ ไม่มีผลกระทบมากนักต่อผืนผ้าใบโดยรวม ระบบจะสร้างเลเยอร์ผสมใหม่สำหรับองค์ประกอบที่มี opacity, transform และ will-change เนื่องจากสิ่งเหล่านี้มีแนวโน้มที่จะเปลี่ยนแปลงอย่างมาก ดังนั้นเบราว์เซอร์จึงตรวจสอบว่าการเปลี่ยนแปลงนั้นมีประสิทธิภาพมากที่สุดโดยใช้ GPU เพื่อใช้การปรับสไตล์

แหล่งข้อมูล

• การบังคับเลเยอร์
• คู่มือภาพเคลื่อนไหว: บังคับสร้างเลเยอร์
• ทําความเข้าใจดัชนีลำดับ Z

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับดัชนีลำดับ Z

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>