การควบคุมการซ้อนทับองค์ประกอบตามแกน Z ใน CSS
ลำดับการซ้อนทับขององค์ประกอบสามารถควบคุมได้
โดยใช้คุณสมบัติ z-index ซึ่งรับค่า
เป็นจำนวนเต็มบวกหรือลบ หรือศูนย์
คุณสมบัตินี้ทำงานเฉพาะกับองค์ประกอบที่กำหนดค่า position
เป็น absolute, fixed
หรือ relative เท่านั้น
เมื่อใช้คุณสมบัตินี้ กฎการซ้อนทับขององค์ประกอบ
มีดังนี้: องค์ประกอบที่มีค่า z-index
มากกว่าจะอยู่ด้านบน
มาเปลี่ยนลำดับการซ้อนทับขององค์ประกอบ
จากตัวอย่างก่อนหน้านี้กัน โดยกำหนดให้องค์ประกอบแรก
มีค่า z-index มากกว่าองค์ประกอบที่สอง เช่น ตามนี้:
#elem1 {
z-index: 2;
}
#elem2 {
z-index: 1;
}
ผลลัพธ์จากการรันโค้ด:
สร้างหน้าเว็บตามตัวอย่างนี้:
สร้างหน้าเว็บตามตัวอย่างนี้:
