z-index trong CSS: thứ tự xếp lớp và stacking context

z-index làm gì

Khi các phần tử chồng lên nhau, z-index quyết định phần tử nào được vẽ ở trước. Số lớn hơn sẽ thắng. Nó hoạt động với các phần tử được định vị (mọi position trừ static) và với flex item, grid item:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .stage { position: relative; height: 170px; }
    .card {
      position: absolute;
      width: 130px; height: 100px; padding: 8px;
      color: white; font-weight: 600; border-radius: 8px;
    }
    .a { background: #2563eb; top: 0; left: 0; z-index: 3; }
    .b { background: #16a34a; top: 30px; left: 60px; z-index: 1; }
    .c { background: #f59e0b; top: 60px; left: 120px; z-index: 2; }
  </style>
</head>
<body>
  <div class="stage">
    <div class="card a" id="a">A z-index: 3</div>
    <div class="card b" id="b">B z-index: 1</div>
    <div class="card c" id="c">C z-index: 2</div>
  </div>
</body>
</html>

Khi không có z-index, phần tử đứng sau trong HTML được vẽ đè lên phần tử đứng trước, nên C sẽ che B và B sẽ che A. Các giá trị z-index đảo ngược điều đó: A ở trước, rồi tới C, rồi tới B.

Các giá trị

Chỉ số nguyên là hợp lệ: z-index: 1.5 bị bỏ qua.

Vì sao z-index 9999 vẫn có thể thua: stacking context

Các giá trị z-index không được so sánh trên toàn trang. Các phần tử được gom vào những stacking context (ngữ cảnh xếp lớp), và z-index chỉ sắp thứ tự các phần tử trong cùng một context. Sau đó cả context được đặt như một lớp duy nhất, theo z-index của phần tử đã tạo ra nó.

Bên dưới, menu thả xuống màu xanh dương có z-index: 9999, nhưng nó nằm trong một header có z-index: 1. Banner màu xanh lá, anh em của header đó, có z-index: 2. Cả lớp header, tính luôn menu thả xuống, nằm bên dưới banner:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacking context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .header {
      position: relative;
      z-index: 1;                 /* creates a stacking context */
      height: 40px; padding: 10px; background: #e5e7eb;
    }
    .dropdown {
      position: absolute;
      top: 40px; left: 20px;
      z-index: 9999;              /* only counts inside .header */
      width: 180px; height: 110px; padding: 8px;
      background: #2563eb; color: white;
    }
    .banner {
      position: relative;
      z-index: 2;
      margin-top: 20px; height: 60px; padding: 10px;
      background: #16a34a; color: white;
    }
    .no-context .header { z-index: auto; }
  </style>
</head>
<body>
  <div id="page">
    <div class="header">Header, z-index: 1
      <div class="dropdown" id="dropdown">Dropdown, z-index: 9999</div>
    </div>
    <div class="banner" id="banner">Banner, z-index: 2</div>
  </div>
  <p><button type="button" id="fix">Set the header's z-index to auto</button> <span id="out"></span></p>
  <script>
    const report = () => {
      const r = document.getElementById('banner').getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 60, r.top + 20);
      document.getElementById('out').textContent = 'On top at the overlap: ' + top.id;
    };
    document.getElementById('fix').addEventListener('click', () => {
      document.getElementById('page').classList.toggle('no-context');
      report();
    });
    report();
  </script>
</body>
</html>

Nhấn nút. Với z-index: auto, header không còn tạo stacking context, nên 9999 của menu thả xuống được so trực tiếp với 2 của banner, và menu thả xuống nổi lên trước. Nâng menu thả xuống lên 99999 sẽ chẳng bao giờ giúp được gì.

Thứ gì tạo ra stacking context

Bất kỳ điều nào dưới đây cũng biến một phần tử thành stacking context riêng, giam z-index của mọi thứ bên trong nó:

Gây bất ngờ nhất là opacity và transform: thêm hiệu ứng mờ dần hay animation khi hover cho phần tử cha có thể bỗng dưng đẩy menu thả xuống của nó ra sau khu vực kế tiếp.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>opacity creates a context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 0; }
    .col { position: relative; width: 160px; height: 120px; padding: 8px; background: #e5e7eb; }
    .col + .col { background: #fde68a; }
    .tip {
      position: absolute; top: 40px; left: 100px; z-index: 10;
      width: 120px; padding: 8px; background: #2563eb; color: white;
    }
    .faded { opacity: 0.99; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col faded" id="first">opacity: 0.99
      <div class="tip" id="tip">Tooltip z-index: 10</div>
    </div>
    <div class="col" id="second">Next column</div>
  </div>
  <p id="out"></p>
  <script>
    const r = document.getElementById('second').getBoundingClientRect();
    document.getElementById('out').textContent =
      'On top in the overlap: ' + document.elementFromPoint(r.left + 30, r.top + 60).id;
  </script>
</body>
</html>

z-index: 10 của tooltip lẽ ra phải đưa nó lên trên cột tiếp theo. Nhưng opacity: 0.99 biến cột đầu tiên thành stacking context với z-index auto (mức 0), và cột thứ hai đứng sau trong HTML ở cùng mức, nên nó được vẽ đè lên toàn bộ cột đầu tiên, tính luôn tooltip. Xóa dòng opacity là tooltip lại nằm phía trước.

z-index âm

z-index âm đặt phần tử nằm sau các phần tử anh em. Nếu phần tử cha không tạo stacking context, nó thậm chí có thể lùi ra sau cả nền của phần tử cha, một bất ngờ thường gặp. isolation: isolate trên phần tử cha tạo ra context mà không có hiệu ứng hiển thị nào khác, và giữ phần tử con có z-index âm ở bên trong:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .button {
      position: relative;
      padding: 14px 20px; background: #e5e7eb; font-weight: 600;
    }
    .button::before {
      content: "";
      position: absolute; inset: -6px;
      background: #f59e0b;
      z-index: -1;               /* behind the button's text */
    }
    .isolated { isolation: isolate; }
  </style>
</head>
<body>
  <div class="button">No isolation</div>
  <div class="button isolated">isolation: isolate</div>
</body>
</html>

Không có isolation, khung màu hổ phách lùi ra sau nền xám của chính nút, nên chỉ lộ ra phần mép. Với isolation: isolate, khung nằm trong stacking context của nút: trên nền của nút, dưới phần chữ.

Một thang z-index

Chọn vài lớp có tên cho cả trang web thay vì tăng số liên tục:

:root {
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
}
.modal { position: fixed; z-index: var(--z-modal); }

Phần lớn lỗi xếp lớp là lỗi stacking context, không phải lỗi con số, nên một thang nhỏ cộng với isolation: isolate trên các component dùng z-index bên trong là đã giải quyết được nhiều. z-index cần định vị mới hoạt động; trang position giải thích phần đó.

Lỗi thường gặp

• z-index trên phần tử static. Thêm position: relative (hoặc biến nó thành flex item hay grid item).
• Leo thang lên 9999. Nếu phần tử cha tạo ra stacking context nằm dưới đối thủ, không giá trị nào của phần tử con thắng được. Hãy tìm ra context đó.
• Một opacity, transform hay filter mới trên phần tử cha bỗng dưng giam menu thả xuống của nó.
• Giá trị thập phân. z-index: 1.5 không hợp lệ.
• Tưởng z-index: 0 và auto hoạt động giống nhau. 0 tạo stacking context; auto thì không.
• Modal nằm sâu trong các component lồng nhau. Hãy render chúng gần cuối <body> (hoặc dùng top layer của phần tử <dialog>), để không context tổ tiên nào giam được chúng.