คุณสมบัติ zIndex ของ HTML DOM Style

คุณสมบัติ zIndex ของ HTML DOM Style ใช้สำหรับดึงหรือกำหนดลำดับการซ้อนทับ (stacking order) ขององค์ประกอบที่มีการจัดตำแหน่ง (positioned element) ในเอกสาร HTML ค่าที่สูงกว่าจะอยู่เหนือค่าที่ต่ำกว่า

ไวยากรณ์ (Syntax)

การดึงค่า zIndex

object.style.zIndex

การกำหนดค่า zIndex

object.style.zIndex = "value"

ค่าที่รองรับ (Values)

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการเปลี่ยนลำดับการซ้อนของกล่องสีแดงและสีเขียว:

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    color: #000;
    height: 100vh;
  }
  .box1 {
    width: 100px;
    height: 100px;
    background: lightcoral;
    position: relative;
    top: 50px;
  }
  .box2 {
    width: 100px;
    height: 100px;
    background: lightgreen;
    position: relative;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem 0;
  }
</style>
</head>
<body>
<h1>ตัวอย่างคุณสมบัติ DOM Style zIndex</h1>
<div class='box1'></div>
<div class='box2'></div>
<button onclick="add()" class="btn">Change zIndex</button>
<script>
  function add() {
    document.querySelector('.box1').style.zIndex = "1";
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: กล่องสีเขียว (box2) อยู่เหนือกล่องสีแดง (box1) ตามลำดับใน HTML หลังคลิกปุ่ม Change zIndex: box1 ได้ zIndex = 1 จึงเลื่อนขึ้นมาอยู่เหนือ box2

เงื่อนไข: zIndex ทำงานได้เฉพาะกับองค์ประกอบที่มี position เป็น relative, absolute, fixed, หรือ sticky เท่านั้น