Cách đặt thứ tự chồng z-index (stack order) bằng JavaScript

Thuộc tính zIndex kiểm soát thứ tự chồng (stack order) của các phần tử **đã được định vị** (position != static). Giá trị số nguyên: càng lớn càng hiển thị trên cùng. Giá trị âm cho phép đặt dưới phần tử cha.

Ví dụ minh họa

Mã sau đổi z-index của ảnh từ -1 sang 1 (hiện lên trên văn bản) khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID {
      position: absolute; /* BẮT BUỘC */
      left: 20px;
      top: 20px;
      z-index: -1; /* Ban đầu dưới văn bản */
    }
  </style>
</head>
<body>
  <img id="myID" 
       src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" 
       width="150" height="150">
  <button type="button" onclick="setZIndex()">Đặt Stack Order</button>
  <p>Z-index ban đầu là -1</p>
  <script>
    function setZIndex() {
      document.getElementById("myID").style.zIndex = "1";
      /* Giờ ảnh hiển thị trên văn bản */
    }
  </script>
</body>
</html>

Quy tắc Stacking Context (Ngữ cảnh chồng)

• z-index chỉ hoạt động trong cùng một **stacking context**.
• Tạo stacking context mới: position: relative/absolute/fixed/sticky + z-index (không phải auto), opacity < 1, transform != none, filter != none, isolation: isolate, will-change...
• Con không thể "vươn ra" khỏi stacking context của cha để so sánh z-index với element ngoài.

Mẹo thực tế

• Dùng hệ thống z-index scale: 100 (dropdown), 200 (modal), 300 (tooltip), 9999 (notification).
• Tránh dùng 999999 lung tung — khó debug.
• z-index: auto (mặc định) = 0 trong stacking context hiện tại.