ดัชนี 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 ของรายการเฟล็กซ์หรือตารางกริดได้โดยไม่ต้องเพิ่ม 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 องค์ประกอบ องค์ประกอบหลักมี z-index ของ 2 และองค์ประกอบย่อยก็มี z-index เป็น 2 ด้วยเช่นกัน เนื่องจากผู้ปกครองทั้ง 2 คนสร้างบริบทแบบเรียงซ้อน z-index ของเด็กทุกคนจะขึ้นอยู่กับผู้ปกครอง

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

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

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

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

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

แหล่งข้อมูล

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

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

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

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