คุณสมบัติ z-index

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

ไวยากรณ์

selector {
	z-index: number | auto;
}

ตัวเลขต้องเป็นจำนวนเต็ม บวกหรือ ลบก็ได้ และสามารถเป็นศูนย์ได้

ค่า

ค่า	คำอธิบาย
ตัวเลข	จำนวนเต็มกำหนดลำดับการซ้อนทับขององค์ประกอบ: เมื่อองค์ประกอบซ้อนทับกัน องค์ประกอบที่อยู่ด้านบน จะเป็นองค์ประกอบที่มีค่า `z-index` มากกว่า
`auto`	ลำดับการซ้อนทับถูกสร้างขึ้นโดยอัตโนมัติ: องค์ประกอบที่อยู่ด้านบนจะเป็น องค์ประกอบที่อยู่ล่างกว่าในโค้ด HTML

ค่าเริ่มต้น: auto

ตัวอย่าง

ในตัวอย่างนี้ บล็อกจะซ้อนทับกัน ตามลำดับที่ปรากฏในโค้ด HTML (ไม่ได้กำหนด z-index และจะมี ค่าเริ่มต้น - auto) บล็อกแรก จะอยู่ด้านล่างสุด (สีแดง) และบล็อกสุดท้าย จะอยู่ด้านบนสุด (สีเขียว):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
}

ตัวอย่าง

มาเปลี่ยนลำดับการซ้อนทับโดยการกำหนด z-index ให้บล็อกสีแดง - 3 สีน้ำเงิน - 2 สีเขียว - 1 ลำดับการซ้อนทับจะเปลี่ยน เป็นแบบย้อนกลับ (บล็อกที่อยู่ด้านบนสุดจะเป็นบล็อกที่มี z-index 3):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
	z-index: 3;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
	z-index: 2;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
	z-index: 1;
}