Dokumentasi CSS interaktif: Z-Index

Q: Kenapa z-index-ku tidak berfungsi?

Bisa karena elemennya tidak diposisikan (z-index butuh position selain static, atau elemen itu child flex atau grid), atau karena elemen itu berada di dalam elemen induk yang membentuk stacking context dengan urutan yang lebih rendah. Sebuah child tidak akan pernah bisa naik di atas elemen yang berada di atas stacking context-nya, berapa pun z-index miliknya sendiri.

Q: Apakah z-index berfungsi tanpa position?

Tidak pada elemen blok atau inline biasa: position: static mengabaikannya. Tetapi z-index berfungsi pada item flex dan item grid tanpa position apa pun.

Apa fungsi z-index

Saat elemen saling tumpang tindih, z-index menentukan mana yang digambar di depan. Angka yang lebih tinggi menang. Property ini berfungsi pada elemen yang diposisikan (position apa pun selain static) dan pada item flex dan grid:

<!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>

Tanpa z-index, elemen yang muncul belakangan di HTML digambar di atas elemen sebelumnya, jadi C akan menutupi B dan B akan menutupi A. Nilai z-index membalik urutan itu: A berada paling depan, lalu C, lalu B.

Nilai

Nilai	Arti
`auto` (default)	Ditumpuk di level 0 bersama saudara-saudaranya, dan tidak membuat stacking context
`0`	Level 0, tetapi membuat stacking context
Bilangan bulat positif	Di depan nilai yang lebih rendah
Bilangan bulat negatif	Di belakang level 0, dan di belakang isi elemen induk kalau elemen induk itu yang membentuk stacking context

Hanya bilangan bulat yang valid: z-index: 1.5 diabaikan.

Kenapa z-index 9999 bisa kalah: stacking context

Nilai z-index tidak dibandingkan di seluruh halaman. Elemen dikelompokkan ke dalam stacking context, dan z-index hanya mengurutkan elemen di dalam context yang sama. Context itu sendiri kemudian ditempatkan sebagai satu lapisan, memakai z-index dari elemen yang membuatnya.

Di bawah, dropdown biru punya z-index: 9999, tetapi berada di dalam header dengan z-index: 1. Banner hijau, saudara dari header itu, punya z-index: 2. Seluruh lapisan header, termasuk dropdown-nya, berada di bawah 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>

Tekan tombolnya. Dengan z-index: auto, header tidak lagi membentuk stacking context, jadi nilai 9999 milik dropdown dibandingkan langsung dengan nilai 2 milik banner, dan dropdown-nya maju ke depan. Menaikkan dropdown ke 99999 tidak akan pernah membantu.

Apa yang membuat stacking context

Salah satu dari hal-hal berikut mengubah elemen menjadi stacking context sendiri, yang mengurung z-index semua elemen di dalamnya:

Property	Kondisi
`position: relative` atau `absolute`	Dengan `z-index` selain `auto`
`position: fixed` atau `sticky`	Selalu
Item flex atau grid	Dengan `z-index` selain `auto`
`opacity`	Di bawah 1
`transform`, `scale`, `rotate`, `translate`	Nilai apa pun selain `none`
`filter`, `backdrop-filter`	Nilai apa pun selain `none`
`isolation`	`isolate`
`mix-blend-mode`	Nilai apa pun selain `normal`
`will-change`	Menyebutkan salah satu property di atas
`contain`	`layout` atau `paint` (dan `strict`, `content`)

Yang mengejutkan adalah opacity dan transform: menambahkan efek fade atau animasi hover pada elemen induk bisa tiba-tiba menaruh dropdown-nya di belakang bagian berikutnya.

<!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 pada tooltip seharusnya menaruhnya di atas kolom berikutnya. Tetapi opacity: 0.99 membuat kolom pertama menjadi stacking context dengan z-index auto (level 0), dan kolom kedua muncul belakangan di HTML pada level yang sama, jadi kolom kedua digambar di atas seluruh kolom pertama, termasuk tooltip-nya. Hapus baris opacity, dan tooltip-nya kembali berada di depan.

z-index negatif

z-index negatif menaruh elemen di belakang saudara-saudaranya. Kalau elemen induknya tidak membentuk stacking context, elemen itu bahkan bisa pindah ke belakang background elemen induk, hal yang sering mengejutkan. isolation: isolate pada elemen induk membuat context tanpa efek visual lain dan menjaga child negatif tetap di dalamnya:

<!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>

Tanpa isolation, bingkai kuning jatuh ke belakang background abu-abu milik tombol itu sendiri, jadi hanya tepinya yang terlihat. Dengan isolation: isolate, bingkainya tetap di dalam stacking context tombol: di atas background-nya, di bawah teksnya.

Skala z-index

Pilih beberapa lapisan bernama untuk seluruh situs, alih-alih terus menaikkan angka:

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

Sebagian besar bug lapisan adalah bug stacking context, bukan bug angka, jadi skala kecil ditambah isolation: isolate pada komponen yang memakai z-index di dalamnya sudah sangat membantu. z-index butuh pemosisian agar berfungsi, dan halaman position membahasnya.

Kesalahan yang sering terjadi

z-index pada elemen static. Tambahkan position: relative (atau jadikan elemen itu item flex atau grid).
Terus menaikkan sampai 9999. Kalau elemen induk membentuk stacking context di bawah elemen pesaingnya, nilai child berapa pun tidak bisa menang. Cari context-nya.
opacity, transform, atau filter baru pada elemen induk yang tiba-tiba mengurung dropdown-nya.
Nilai desimal. z-index: 1.5 tidak valid.
Mengira z-index: 0 dan auto berperilaku sama. 0 membuat stacking context, sedangkan auto tidak.
Modal di dalam komponen yang bertingkat dalam. Render modal di dekat akhir <body> (atau pakai top layer milik elemen <dialog>), supaya tidak ada context ancestor yang bisa mengurungnya.

Pertanyaan yang sering diajukan

Apa fungsi z-index?

Property ini mengatur urutan tumpukan elemen yang saling tumpang tindih: nilai yang lebih tinggi digambar di depan nilai yang lebih rendah di dalam stacking context yang sama. Default-nya adalah auto, dan nilainya berupa bilangan bulat, termasuk bilangan negatif.

Kenapa z-index-ku tidak berfungsi?

Bisa karena elemennya tidak diposisikan (z-index butuh position selain static, atau elemen itu child flex atau grid), atau karena elemen itu berada di dalam elemen induk yang membentuk stacking context dengan urutan yang lebih rendah. Sebuah child tidak akan pernah bisa naik di atas elemen yang berada di atas stacking context-nya, berapa pun z-index miliknya sendiri.

Apa itu stacking context?

Sekelompok elemen yang ditumpuk bersama sebagai satu lapisan. Di dalamnya, child diurutkan berdasarkan z-index masing-masing. Di luarnya, seluruh kelompok ditempatkan berdasarkan z-index elemen yang membuatnya.

Apa yang membuat stacking context?

Di antaranya: elemen root, elemen terposisi dengan z-index selain auto, position: fixed atau sticky, child flex atau grid dengan z-index, opacity di bawah 1, transform, filter, isolation: isolate, dan will-change pada property-property tersebut.

Apakah z-index berfungsi tanpa position?

Tidak pada elemen blok atau inline biasa: position: static mengabaikannya. Tetapi z-index berfungsi pada item flex dan item grid tanpa position apa pun.

Konsep terkait

z-index di CSS: Urutan Tumpukan dan Stacking Context