z-index เป็นการกำหนดเลเยอร์ ซึ่งจะอธิบายได้ว่า ถ้า z-index อันไหนมีค่ามากกว่าก็จะอยู่ด้านบนนั้นเอง จากตัวอย่างเราสามารถนำไปประยุกต์ใช้กับรูปภาพเพื่อใช้ลำดับความสำคัญได้ ช่วยแก้ปัญหาสำหรับเลเยอร์ที่ซ้อนกัน ซึ่งต้องใช้ควบคู่กับ CSS : position ด้วย โดยค่า z-index ปกติแล้วถ้าเราไม่กำหนด z-index (z-index จะเท่ากับ 0 )
ตัวอย่างโค้ดที่เขียน
โค้ด: เลือกทั้งหมด
<html>
<head>
<style>
img {
position: absolute; //สามารถกำหนดตำแหน่งได้อย่างอิสระ
left: 20px; //กำหนดระยะห่างด้านซ้าย
top: 20px; //กำหนดระยะห่างด้านบน
z-index: -2; //เป็นการกำหนดเลเยอร์ (เช่น ถ้าอันไหนมีค่ามากกว่าก็จะอยู่ด้านบน)
}
</style>
</head>
<body>
<h1>ประโยชน์ของแอปเปิ้ล</h1>
<img src="apple.jpg" width="150" height="150">
</body>
</html>