Ketika elemen saling bertumpuk, kita perlu kendali atas urutan penggambarannya: modal harus berada di atas overlay, dropdown harus di atas kartu, dan tooltip harus di atas keduanya. Properti z-index memberikan kendali itu melalui bilangan bulat yang menentukan urutan lapisan. Meski terlihat sederhana, z-index adalah sumber kebingungan klasik karena berlakunya bersyarat dan hasilnya bergantung pada stacking context . Pada Chapter ini kita menuntaskan syarat berlakunya z-index, perilaku nilai negatif, dan kebiasaan penataan yang menjaga urutan lapisan tetap terprediksi.

Syarat Z-index Berlaku #

z-index hanya berpengaruh pada dua kelompok elemen: elemen positioned (yang memiliki position selain static) dan item flex atau grid (anak langsung dari wadah display: flex atau display: grid). Pada elemen statis biasa, deklarasi z-index diabaikan seluruhnya — browser tetap mencatat angkanya pada computed style, tetapi urutan menggambar tidak berubah sedikit pun.

Nilainya berupa bilangan bulat, termasuk negatif, atau kata kunci auto. Elemen dengan nilai lebih besar digambar di atas yang lebih kecil dalam stacking context yang sama. Bila dua elemen bernilai sama — keduanya 1, misalnya — urutan DOM menjadi penentu: elemen yang ditulis belakangan menang. Pola ini praktis karena membuat urutan lapisan mengikuti urutan baca dokumen tanpa perlu menaikkan angka.

Urutan DOM dan Nilai Negatif #

Nilai negatif menempatkan elemen di bawah konten alur dan di bawah latar ancestor-nya, dengan satu pengecualian penting yang bergantung pada stacking context. Elemen anak yang diberi z-index: -1 bersembunyi di balik latar parent-nya selama rantai ancestor tidak membentuk context baru. Setelah parent membentuk context — misalnya lewat isolation: isolate atau opacity di bawah 1 — anak negatif itu berhenti di atas latar parent tersebut, tetap terkurung di dalamnya.

Demo chapter ini memperlihatkan kedua wajah perilaku tersebut berdampingan:

css 
.kotak-statis-z { z-index: 5; }        /* diabaikan: tidak positioned */
.kartu-utama {
  position: absolute;
  z-index: 5;
}
.kartu-a { position: absolute; z-index: 1; }
.kartu-b { position: absolute; z-index: 1; } /* ditulis belakangan */
.kotak-dasar { position: relative; }    /* bukan stacking context */
.anak-sembunyi {
  position: absolute;
  z-index: -1;
}
html index.html 
<div class="arena-lapis">
  <div class="kartu-a">z-index 1 (lebih dulu)</div>
  <div class="kartu-b">z-index 1 (belakangan)</div>
  <div class="kartu-utama">z-index 5</div>
</div>
<div class="kotak-dasar">
  <span class="anak-sembunyi">di balik latar</span>
</div>

Hasil di Browser:

text 
Kotak statis yang diberi z-index: 5 dicatat computed position: static
dan computed z-index: 5, tetapi urutan menggambar tidak berubah karena
syarat positioned tidak terpenuhi. Kartu absolute dengan z-index: 5
menggambar di atas dua kartu z-index: 1; di antara kedua kartu
bernilai 1, kartu yang ditulis belakangan menutupi kartu yang lebih
dulu. Kotak kuning dengan z-index: -1 bersembunyi di balik latar
parent yang tidak membentuk stacking context; salinannya di dalam
parent ber-isolation: isolate tetap terlihat di atas latar parent
itu sendiri.

Mari kita telaah deklarasinya baris demi baris:

  1. Baris 1 (.kotak-statis-z): z-index ditulis pada elemen statis. Ini eksperimen negatif — angka tercatat, tetapi tanpa efek.
  2. Baris 2–5 (.kartu-utama): elemen positioned dengan nilai 5, nilai tertinggi di arena sehingga menutupi semua saudaranya.
  3. Baris 6–7 (dua kartu bernilai 1): nilai sama berarti urutan DOM yang memutuskan; kartu kedua digambar di atas kartu pertama.
  4. Baris 8–11 (pasangan negatif): .kotak-dasar hanya relative tanpa context, sehingga anaknya tenggelam di balik latar; pada versi ber-isolation, anak yang sama tampil jelas.

Praktik Menata Z-index #

Dengan syarat berlaku, urutan DOM, dan nilai negatif dalam kepala, Anda dapat membaca kembali kasus-kasus pada Chapter Stacking Context dan menghubungkannya dengan angka-angka z-index di dalamnya.