การควบคุมการซ้อนทับองค์ประกอบตามแกน Z ใน CSS

ลำดับการซ้อนทับขององค์ประกอบสามารถควบคุมได้ โดยใช้คุณสมบัติ z-index ซึ่งรับค่า เป็นจำนวนเต็มบวกหรือลบ หรือศูนย์ คุณสมบัตินี้ทำงานเฉพาะกับองค์ประกอบที่กำหนดค่า position เป็น absolute, fixed หรือ relative เท่านั้น

เมื่อใช้คุณสมบัตินี้ กฎการซ้อนทับขององค์ประกอบ มีดังนี้: องค์ประกอบที่มีค่า z-index มากกว่าจะอยู่ด้านบน

มาเปลี่ยนลำดับการซ้อนทับขององค์ประกอบ จากตัวอย่างก่อนหน้านี้กัน โดยกำหนดให้องค์ประกอบแรก มีค่า z-index มากกว่าองค์ประกอบที่สอง เช่น ตามนี้:

css#elem1 {
  z-index: 2;
}
#elem2 {
  z-index: 1;
}

ผลลัพธ์จากการรันโค้ด: