พอดแคสต์ 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>
บทความใดอยู่ด้านบนสุดโดยค่าเริ่มต้น
หากดัชนีลำดับ Z ไม่ทำงาน คุณควรตรวจสอบพร็อพเพอร์ตี้ใดในองค์ประกอบ
position
display
relative
animation
Flexbox และตารางกริดต้องใช้ position: relative
ไหม