การสร้างแอนิเมชันสำหรับคุณสมบัติ CSS z-index

คุณสมบัติ z-index ควบคุมลำดับการซ้อนทับ (stacking order) ของ positioned elements การ animate z-index จะทำให้ element "กระโดด" ขึ้นลงระหว่างชั้น (discrete steps) เพราะ z-index เป็น integer

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    div { position: absolute; }
    #box div {
      background-color: orange;
      border: 2px solid yellow;
      width: 100px;
      height: 100px;
      opacity: 0.3;
    }
    div#demo {
      opacity: 1;
      background-color: coral;
      z-index: 1;
      animation: myanim 3s;
    }
    @keyframes myanim {
      30% {
        z-index: 3;
      }
    }
  </style>
</head>
<body>
  <h1>CSS z-index property</h1>
  <div id="box">
    <div id="demo"></div>
    <div style="top:20px;left:20px;z-index:1;">One</div>
    <div style="top:40px;left:40px;z-index:2;">Two</div>
    <div style="top:60px;left:60px;z-index:3;">Three</div>
    <div style="top:80px;left:80px;z-index:4;">Four</div>
    <div style="top:100px;left:40px;z-index:5;">Five</div>
    <div style="top:120px;left:60px;z-index:6;">Six</div>
    <div style="top:140px;left:80px;z-index:7;">Seven</div>
  </div>
</body>
</html>

คำอธิบาย: มีกล่องซ้อนกัน 7 ชั้น (z-index 1-7) กล่อง coral (#demo) เริ่มต้น z-index:1 (อยู่ชั้นล่างสุดของกล่องสีส้ม) ที่ 30% จะกระโดดเป็น z-index:3 (ขึ้นมาระหว่าง Two และ Three) แล้วจบแอนิเมชัน (ไม่มี infinite) กลับเป็น 1

ข้อสังเกตสำคัญ:

• z-index เป็น discrete animation (ไม่มีค่าระหว่าง 1 และ 3) บราวเซอร์จะสลับทันทีที่ keyframe
• ต้องมี position: relative/absolute/fixed/sticky ถึงจะทำงาน
• สร้าง stacking context ใหม่เมื่อมี opacity < 1, transform, filter เป็นต้น

การประยุกต์: ใช้สำหรับ modal/dropdown ที่ต้องการขึ้นมาข้างบนชั่วคราว แล้วกลับไปอยู่ชั้นเดิม