Z-Index CSS Adalah: Cara Mengatur Tumpukan Elemen (+ Cheatsheet Z-Index di Tailwind)

Z-index adalah properti CSS yang mengatur urutan tumpukan (stacking order) elemen-elemen yang saling menimpa — elemen dengan nilai z-index lebih besar tampil di depan, yang lebih kecil tertutup di belakang. Satu syarat yang paling sering terlewat: z-index hanya bekerja pada elemen dengan position selain static (atau pada flex/grid item) — dan inilah penyebab nomor satu keluhan “z-index tidak berfungsi”.

Kalau kamu pernah menulis z-index: 9999 tapi elemennya tetap ketutup, atau bingung kenapa dropdown menyelinap di belakang gambar, artikel ini untukmu. Kita bahas tuntas dari definisi, sintaks, syarat z-index bekerja, konsep stacking context (biang kerok kenapa 9999 bisa kalah dari 10), cara debugging di DevTools, kasus nyata seperti modal dan sticky header, sampai cheatsheet z-index di Tailwind CSS lengkap dengan konvensi skala layering yang dipakai di proyek nyata.

Z-Index Adalah… (Definisi dan Cara Kerja Dasarnya)

Z-index adalah properti CSS yang menentukan posisi elemen di sumbu Z — sumbu imajiner yang arahnya “keluar dari layar” menuju mata kamu. Kalau sumbu X mengatur kiri-kanan dan sumbu Y mengatur atas-bawah, sumbu Z mengatur depan-belakang: elemen mana yang menimpa elemen mana saat keduanya menempati area layar yang sama.

Tanpa z-index sekalipun, browser sebenarnya sudah punya aturan tumpukan default: elemen yang ditulis lebih akhir di HTML digambar di atas elemen yang ditulis lebih awal. Jadi kalau dua kotak bertumpuk, kotak yang muncul belakangan di dokumen otomatis menang. Z-index adalah cara kamu meng-override urutan alami itu.

Sintaksnya sederhana:

.selector {
  z-index: 10;
}

Nilainya berupa bilangan bulat (integer): positif, nol, atau negatif. Nilai default-nya adalah auto, yang artinya elemen mengikuti urutan tumpukan alami tanpa membentuk lapisan baru.

Mari lihat contoh paling dasar — dua kotak yang sengaja dibuat bertumpuk:

<div class="kotak biru">Biru (ditulis duluan)</div>
<div class="kotak merah">Merah (ditulis belakangan)</div>

.kotak {
  position: relative; /* syarat wajib — dibahas di bagian berikutnya */
  width: 160px;
  height: 100px;
  border-radius: 8px;
  color: white;
  padding: 12px;
}
.biru {
  background: #3b82f6;
}
.merah {
  background: #ef4444;
  margin-top: -60px;  /* sengaja ditarik ke atas agar menimpa si biru */
  margin-left: 60px;
}

Tanpa z-index, kotak merah menimpa kotak biru — wajar, karena merah ditulis belakangan di HTML. Sekarang tambahkan satu baris:

.biru {
  background: #3b82f6;
  z-index: 1; /* biru naik ke depan, menimpa merah */
}

Meskipun biru ditulis lebih dulu, nilai z-index: 1 membuatnya menang atas merah yang masih auto. Itulah inti kerja z-index: angka lebih besar tampil lebih depan. Kalau kamu mau mencoba konsep ini sambil langsung mengetik kode dengan urutan materi yang terstruktur, lesson z-index di Hyper Sheets membahasnya langkah demi langkah dengan editor langsung di browser.

Nilai Negatif: Menyembunyikan Elemen di Belakang

Z-index juga menerima nilai negatif, dan ini sangat berguna untuk elemen dekoratif — misalnya blob warna atau pola background yang harus berada di belakang konten:

<section class="hero">
  <div class="hiasan"></div>
  <h1>Judul Halaman</h1>
  <p>Teks tetap terbaca karena hiasan ada di belakang.</p>
</section>

.hero {
  position: relative;
}
.hiasan {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #fde68a;
  z-index: -1; /* mundur ke belakang konten */
}

Dengan z-index: -1, lingkaran kuning itu digambar di belakang judul dan paragraf. Satu catatan penting: elemen ber-z-index negatif bisa “tenggelam” di belakang background induknya — kecuali induknya sendiri membentuk stacking context (konsep yang kita bahas sebentar lagi). Kalau hiasanmu tiba-tiba hilang total, kemungkinan besar ia tenggelam terlalu dalam.

z-index: auto vs z-index: 0

Sekilas auto dan 0 terlihat sama — dua-duanya membuat elemen berada di “lantai dasar”. Bedanya krusial: z-index: 0 membentuk stacking context baru pada elemen positioned, sedangkan auto tidak. Perbedaan ini sering jadi sumber bug halus: mengganti auto menjadi 0 bisa tiba-tiba mengubah perilaku tumpukan anak-anak elemen tersebut, padahal “angkanya sama-sama nol”. Simpan dulu fakta ini — nanti masuk akal setelah bagian stacking context.

Syarat Z-Index Bekerja: Elemen Harus Positioned

Z-index hanya berpengaruh pada elemen yang “positioned” — yaitu elemen dengan position: relative, absolute, fixed, atau sticky — serta pada anak langsung dari flex/grid container. Pada elemen dengan position: static (nilai default semua elemen HTML), z-index diabaikan sepenuhnya, berapa pun angkanya. Ini kesalahan nomor satu pemula: menulis z-index besar-besaran tapi lupa bahwa elemennya masih static.

Contoh yang tidak bekerja:

/* TIDAK BERFUNGSI — elemen masih position: static */
.kartu {
  z-index: 999;
}

Dan perbaikannya cuma satu baris:

/* BERFUNGSI — z-index kini dihormati browser */
.kartu {
  position: relative;
  z-index: 999;
}

Kenapa relative? Karena position: relative tanpa offset (top, left, dan kawan-kawan) tidak menggeser elemen satu piksel pun — layout tetap persis sama, tapi elemen kini berstatus “positioned” sehingga z-index-nya aktif. Ini trik paling aman dan paling sering dipakai. Kalau kamu belum akrab dengan perbedaan relative, absolute, fixed, dan sticky, pelajari dulu di materi CSS position — z-index dan position memang pasangan yang tidak bisa dipisahkan, dan kamu juga bisa bereksperimen bebas dengan keduanya di playground position interaktif.

Ada satu pengecualian modern yang layak kamu tahu: flex item dan grid item bisa memakai z-index tanpa position. Anak langsung dari container display: flex atau display: grid akan menghormati z-index meskipun position-nya masih static:

.galeri {
  display: flex;
}
.galeri .foto-utama {
  z-index: 1; /* bekerja! flex item tidak butuh position */
  transform: scale(1.15);
}

Berguna misalnya saat satu foto di deretan galeri diperbesar dan harus menimpa tetangganya. Kalau konsep flex container dan flex item masih samar, panduan memahami Flexbox membahasnya dari nol.

Satu catatan lagi soal jenis elemen: status block atau inline tidak ada hubungannya dengan syarat ini — yang dicek browser hanyalah nilai position (atau status flex/grid item). Elemen span yang inline pun bisa diberi z-index asal positioned. Kalau kamu lupa beda block dan inline, ada penjelasan lengkap elemen inline di blog ini.

Stacking Context: Kenapa z-index: 9999 Bisa Kalah dari z-index: 10

Stacking context adalah “dunia tumpukan” tersendiri: di dalamnya, semua z-index anak hanya dibandingkan dengan sesama anak dalam konteks yang sama — tidak pernah dengan elemen di luar konteks itu. Saat dua elemen berasal dari stacking context berbeda, yang menentukan siapa di depan bukanlah z-index mereka sendiri, melainkan z-index induk pembentuk konteksnya. Inilah jawaban dari misteri paling terkenal di dunia CSS: kenapa z-index: 9999 bisa kalah dari z-index: 10.

Analogi yang paling gampang: bayangkan z-index seperti nomor lantai di sebuah gedung. Lantai 99 gedung A tetap saja kalah tinggi dari lantai 2 gedung B kalau gedung B dibangun di atas bukit. Perbandingan antar gedung ditentukan oleh posisi gedungnya, bukan nomor lantai di dalamnya. Stacking context = gedungnya; z-index anak = nomor lantainya.

Lihat buktinya dalam kode:

<div class="induk-a">
  <div class="anak-a">z-index: 9999</div>
</div>
<div class="induk-b">z-index: 2</div>

.induk-a {
  position: relative;
  z-index: 1; /* induk A membentuk stacking context ber-level 1 */
}
.anak-a {
  position: absolute;
  z-index: 9999; /* hanya berlaku DI DALAM dunia induk A */
}
.induk-b {
  position: relative;
  z-index: 2; /* level 2 — mengalahkan seluruh isi induk A */
}

Hasilnya: induk-b menimpa anak-a, padahal angkanya cuma 2 lawan 9999. Kenapa? Karena induk-a (dengan position: relative + z-index: 1) membentuk stacking context sendiri. Angka 9999 milik si anak hanya berlaku untuk persaingan di dalam induk A. Di dunia luar, yang bertanding adalah induk A (level 1) melawan induk B (level 2) — dan 2 menang atas 1. Seluruh isi induk A, sehebat apa pun z-index-nya, ikut kalah bersama induknya.

Apa Saja yang Membentuk Stacking Context?

Ini bagian yang wajib dihafal, karena beberapa pemicunya sangat tidak terduga. Sebuah elemen membentuk stacking context baru ketika ia:

• Punya position: relative atau absolute dengan z-index selain auto
• Punya position: fixed atau sticky (di browser modern, ini saja sudah cukup — tanpa z-index)
• Merupakan flex item atau grid item dengan z-index selain auto
• Punya opacity dengan nilai di bawah 1 (misalnya opacity: 0.99 sekalipun!)
• Punya transform selain none — ini pemicu yang paling sering tidak disadari
• Punya filter atau backdrop-filter selain none
• Punya will-change untuk properti seperti transform atau opacity
• Punya isolation: isolate
• Punya mix-blend-mode selain normal, atau perspective/clip-path/mask tertentu

Perhatikan betapa “tidak bersalahnya” beberapa pemicu itu. Kamu menambahkan transform: translateY(-2px) untuk efek hover di sebuah card — dan diam-diam card itu kini jadi gedung sendiri: semua dropdown atau tooltip di dalamnya terkurung, tidak akan pernah bisa tampil di atas elemen luar yang stacking context-nya lebih tinggi. Hal yang sama berlaku saat kamu memberi opacity: 0.95 pada sebuah section, atau filter: blur(0) untuk memancing GPU rendering.

isolation: isolate — Membentuk Stacking Context dengan Sengaja

Kalau stacking context bisa jadi jebakan, ia juga bisa jadi alat. Properti isolation: isolate membentuk stacking context baru tanpa efek samping visual apa pun — tidak perlu position, tidak perlu z-index, tidak perlu opacity:

.card {
  isolation: isolate; /* semua perang z-index di dalam card terkunci di sini */
}

Gunanya: mengurung z-index internal sebuah komponen supaya tidak bocor dan berkelahi dengan dunia luar. Misalnya di dalam card ada badge ber-z-index: 2 dan ribbon ber-z-index: 3 — dengan isolation: isolate di card, angka-angka itu jadi urusan internal card dan dijamin tidak akan menimpa navbar atau modal di level halaman. Komponenmu jadi self-contained: aman dipindah-pindah tanpa memicu bug tumpukan baru.

Cara Debugging Tumpukan Elemen di DevTools

Cara debugging masalah z-index: inspect elemen yang “kalah”, pastikan z-index-nya benar-benar aktif (position bukan static), lalu telusuri rantai ancestor-nya satu per satu untuk menemukan siapa yang membentuk stacking context. Sebagian besar bug tumpukan selesai dengan tiga langkah ini — masalahnya hampir tidak pernah di elemen itu sendiri, melainkan di salah satu induknya.

Berikut alur lengkap yang bisa kamu ikuti di Chrome/Edge/Firefox DevTools:

1. Klik kanan elemen yang ketutup → Inspect. Buka tab Computed, lalu cari nilai position dan z-index. Kalau position: static, kasus selesai: z-index-mu memang diabaikan — tambahkan position: relative.
2. Kalau z-index sudah aktif tapi tetap kalah, curigai stacking context. Naiki pohon elemen di panel Elements satu per satu dari elemen tersebut ke atas. Di setiap ancestor, cek properti pemicu: transform, opacity, filter, position + z-index, will-change, isolation. Begitu ketemu, kamu sudah menemukan “gedung”-nya.
3. Uji hipotesis langsung di DevTools. Matikan properti pemicu itu dengan mencentang-hilangkan deklarasinya di panel Styles. Kalau tumpukan langsung benar, terkonfirmasi: ancestor itulah biang keroknya. Sekarang kamu tinggal memutuskan solusinya — memindahkan elemen keluar dari konteks itu, atau menaikkan z-index si ancestor (bukan si anak!).
4. Bandingkan level antar “gedung”. Kalau dua elemen berada di stacking context berbeda, catat z-index masing-masing pembentuk konteks, karena merekalah yang sebenarnya bertanding. Menaikkan z-index si anak sampai jutaan tidak akan pernah membantu.

Tips tambahan: Microsoft Edge punya fitur 3D View (menu More tools) yang menggambarkan tumpukan elemen halamanmu secara tiga dimensi lengkap dengan sumbu Z — sangat membantu untuk melihat lapisan mana berada di atas mana secara visual. Di Chrome, kamu bisa mendapat gambaran serupa lewat panel Layers.

Satu kebiasaan kecil yang menyelamatkan banyak waktu: saat menulis CSS untuk komponen ber-z-index, tambahkan komentar kenapa angka itu dipilih (z-index: 40; /* di bawah modal (50), di atas konten */). Enam bulan kemudian, kamu akan berterima kasih pada dirimu sendiri.

Kasus Nyata: Sticky Header, Dropdown, dan Modal

Tiga kasus tumpukan yang pasti kamu temui di setiap proyek web: sticky header yang harus selalu di atas konten, dropdown yang harus menimpa elemen di bawahnya, dan modal yang harus menutup segalanya — termasuk sticky header itu sendiri. Ketiganya sebenarnya satu masalah yang sama: menentukan hierarki lapisan yang konsisten untuk seluruh halaman.

Sticky Header / Navbar

Navbar yang menempel di atas saat halaman di-scroll adalah kombinasi position: sticky + z-index:

.navbar {
  position: sticky;
  top: 0;
  z-index: 40; /* di atas konten halaman, di bawah modal */
  background: white;
  border-bottom: 1px solid #e2e8f0;
}

Tanpa z-index, navbar sticky bisa “diterobos” oleh elemen konten yang kebetulan positioned — misalnya gambar dengan position: relative untuk efek dekorasi. Nilai 40 di sini bukan angka ajaib, melainkan bagian dari konvensi skala yang kita bahas setelah ini.

Dropdown Menu

Dropdown adalah pola klasik position: absolute di dalam induk position: relative:

<nav class="menu-item">
  <button>Produk</button>
  <ul class="dropdown">
    <li>Fitur A</li>
    <li>Fitur B</li>
  </ul>
</nav>

.menu-item {
  position: relative; /* jangkar untuk si dropdown */
}
.dropdown {
  position: absolute;
  top: 100%;         /* muncul tepat di bawah tombol */
  left: 0;
  z-index: 30;       /* menimpa konten di bawahnya */
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Bug dropdown paling umum: menyelinap di belakang section berikutnya. Penyebabnya hampir selalu salah satu dari dua hal — dropdown-nya belum diberi z-index yang cukup, atau induk si dropdown terkurung di stacking context yang levelnya rendah (misalnya card yang punya transform untuk animasi hover). Yang kedua tidak bisa diselesaikan dengan menaikkan z-index dropdown; kamu harus melepas pemicu stacking context di induknya.

Modal di Atas Segalanya

Modal (dialog) harus menutup seluruh halaman, termasuk navbar sticky. Resepnya: position: fixed untuk backdrop yang menutup layar penuh, plus z-index tertinggi di skalamu:

<div class="modal-backdrop">
  <div class="modal">
    <h2>Konfirmasi</h2>
    <p>Yakin mau menghapus data ini?</p>
    <button>Batal</button>
    <button>Hapus</button>
  </div>
</div>

.modal-backdrop {
  position: fixed;
  inset: 0;                      /* top/right/bottom/left: 0 — layar penuh */
  z-index: 50;                   /* di atas navbar (40) */
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
}

Perhatikan dua hal. Pertama, si modal sendiri tidak butuh z-index — ia sudah “menumpang” di dalam backdrop yang levelnya 50. Kedua, dan ini yang terpenting: letakkan markup modal langsung di bawah body, bukan di dalam komponen yang dalam. Kalau modal dirender di dalam elemen yang terkurung stacking context rendah, z-index: 50 miliknya tidak akan pernah menembus keluar — persis masalah gedung dan lantai tadi. Inilah alasan framework seperti React punya konsep portal: merender modal ke ujung body supaya bebas dari stacking context mana pun.

Konvensi Skala Layering

Daripada menentukan angka secara impulsif setiap kali butuh, tim profesional memakai skala terpusat. Contoh konvensi yang umum (dan sejalan dengan skala Tailwind):

Lapisan	z-index	Contoh elemen
Konten dasar	0	Body, section, card
Elemen terangkat	10 – 20	Badge, gambar dekoratif, card melayang
Dropdown / tooltip	30	Menu navigasi, tooltip
Sticky header	40	Navbar, tab bar
Modal + backdrop	50	Dialog, drawer, overlay
Notifikasi darurat	60+	Toast, banner error global

Loncatan 10 antar level itu disengaja: menyisakan ruang untuk menyisipkan lapisan baru (misalnya 35 untuk mega-menu) tanpa harus menggeser semua angka lain.

Cheatsheet Z-Index di Tailwind CSS

Di Tailwind CSS, z-index diatur lewat utility class z-*: skala bawaannya z-0, z-10, z-20, z-30, z-40, z-50, dan z-auto, plus nilai arbitrer seperti z-[60] dan versi negatif seperti -z-10. Semua aturan CSS yang kita bahas di atas tetap berlaku persis sama — Tailwind hanyalah cara singkat menuliskannya, jadi z-50 tanpa relative/absolute/fixed/sticky tetap tidak berfungsi.

Ini cheatsheet lengkapnya:

Class Tailwind	CSS yang dihasilkan	Kegunaan umum
z-0	z-index: 0	Lapisan dasar, “reset” tumpukan
z-10	z-index: 10	Elemen sedikit terangkat
z-20	z-index: 20	Badge, elemen dekoratif
z-30	z-index: 30	Dropdown, tooltip
z-40	z-index: 40	Sticky navbar
z-50	z-index: 50	Modal, drawer, overlay
z-auto	z-index: auto	Kembali ke tumpukan alami
-z-10	z-index: -10	Hiasan di belakang konten
z-[60]	z-index: 60	Nilai arbitrer di luar skala
z-[9999]	z-index: 9999	Bisa, tapi baca bagian kesalahan umum dulu!

Pola pemakaian di dunia nyata — navbar sticky dan modal, versi Tailwind:

<!-- Navbar: sticky + z-40 -->
<header class="sticky top-0 z-40 border-b bg-white">
  <nav class="flex items-center justify-between p-4">...</nav>
</header>

<!-- Hiasan di belakang teks: -z-10 -->
<section class="relative">
  <div class="absolute -top-4 -right-4 -z-10 h-40 w-40 rounded-full bg-amber-200"></div>
  <h1>Judul tetap terbaca</h1>
</section>

<!-- Modal: fixed + z-50, menutup navbar -->
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="w-[90%] max-w-md rounded-xl bg-white p-6">...</div>
</div>

Perhatikan bagaimana z-* selalu berpasangan dengan utility position: sticky untuk navbar, relative untuk jangkar hiasan, fixed untuk backdrop modal. Ini bukan kebetulan gaya penulisan — ini syarat teknis z-index yang sudah kita bahas, hanya berganti kostum jadi utility class.

Beberapa catatan praktis khas Tailwind:

• Skala loncat 10 itu fitur, bukan keterbatasan. Tailwind sengaja memberi enam level (0–50) supaya kamu berpikir dalam lapisan semantik, bukan angka bebas. Butuh level di antaranya? z-[35] selalu tersedia — tapi kalau kamu terlalu sering memakainya, itu sinyal skema layering-mu perlu dirapikan.
• Nilai negatif memakai prefix minus di depan class: -z-10, bukan z--10.
• Responsif dan state variant bekerja normal: md:z-30 untuk breakpoint, hover:z-10 untuk mengangkat card saat disentuh kursor.
• Skala default juga bisa diperluas lewat konfigurasi tema Tailwind kalau proyekmu butuh level bernama sendiri.

Kalau kamu ingin latihan langsung menggabungkan utility position dan z-index dalam kasus-kasus nyata, ada lesson khusus position dan z-index versi Tailwind di Hyper Sheets. Dan kalau kamu baru mulai dengan Tailwind secara umum, mulai dari panduan lengkap Tailwind CSS dulu supaya konsep utility-first-nya mengendap.

Kesalahan Umum Saat Menggunakan Z-Index

Kesalahan paling umum seputar z-index: memasang z-index pada elemen position: static, ikut “perang angka” 99999, dan tidak sadar bahwa transform atau opacity diam-diam membentuk stacking context baru. Berikut daftar lengkapnya — kalau tumpukanmu bermasalah, kemungkinan besar penyebabnya ada di sini.

1. Z-Index Tanpa Position

Sudah dibahas, tapi layak diulang karena ini 80% kasus “z-index tidak berfungsi”: elemen position: static mengabaikan z-index sepenuhnya. Solusi tercepat dan teraman adalah position: relative tanpa offset — layout tidak bergeser sedikit pun, tapi z-index langsung aktif. Cek ini pertama kali, sebelum menyalahkan hal lain.

2. Perang Angka: 999, 9999, 99999…

Kamu menaikkan z-index jadi 999. Minggu depan rekan setim menimpa dengan 9999. Bulan depan ada 2147483647 di codebase. Perang angka seperti ini tanda tidak adanya skema layering — dan ironisnya sering kali tidak menyelesaikan apa pun, karena kalau elemenmu terkurung di stacking context yang kalah level, angka sebesar apa pun tetap sia-sia. Solusinya bukan angka lebih besar, melainkan: (1) pahami stacking context-nya, (2) sepakati skala terpusat seperti tabel konvensi di atas, (3) dokumentasikan di satu tempat.

3. Transform Diam-Diam Membentuk Stacking Context

transform adalah properti CSS untuk mengubah tampilan elemen — menggeser (translate), memutar (rotate), atau menskalakan (scale) — dan sangat populer untuk animasi hover. Yang jarang disadari: nilai transform apa pun selain none langsung membentuk stacking context baru pada elemen itu. Gejalanya klasik: dropdown di dalam card berjalan normal, lalu seseorang menambahkan transform: translateY(-4px) untuk efek hover card — dan sejak itu dropdown selalu ketutup elemen di luar card. Kalau kamu menemui tumpukan yang rusak “tiba-tiba setelah menambah animasi”, curigai transform lebih dulu.

4. Lupa isolation: isolate untuk Mengunci Komponen

Kalau kamu membuat komponen yang punya perang z-index internal (badge di atas gambar, ribbon di atas badge), kurung semuanya dengan isolation: isolate di elemen terluar komponen. Tanpa itu, angka-angka internal komponenmu ikut bertanding di level halaman — dan bisa tanpa sengaja menimpa navbar atau tooltip global. Dengan isolasi, komponen jadi kotak tertutup yang aman ditaruh di mana saja.

5. Memakai Z-Index Padahal Cukup Urutan HTML

Ingat aturan default: elemen yang ditulis belakangan otomatis di atas. Banyak kasus yang tidak butuh z-index sama sekali — cukup pindahkan urutan elemen di HTML. Z-index adalah alat untuk pengecualian dari urutan alami, bukan pengganti struktur dokumen yang benar. Semakin sedikit z-index di codebase, semakin mudah tumpukannya dipahami.

FAQ Seputar Z-Index

Apa itu z-index di CSS?

Z-index adalah properti CSS yang mengatur urutan tumpukan (stacking order) elemen-elemen yang saling menimpa di sumbu Z — sumbu depan-belakang layar. Elemen dengan nilai z-index lebih besar digambar di depan elemen dengan nilai lebih kecil. Nilainya bilangan bulat (boleh negatif) atau auto, dan hanya berlaku pada elemen positioned atau flex/grid item.

Kenapa z-index tidak berfungsi?

Dua penyebab utamanya: (1) elemen masih position: static — z-index diabaikan total; tambahkan position: relative untuk mengaktifkannya tanpa menggeser layout. (2) Elemen terkurung dalam stacking context yang levelnya kalah — biasanya karena salah satu induknya punya transform, opacity di bawah 1, filter, atau position + z-index rendah. Untuk kasus kedua, menaikkan z-index si elemen tidak akan membantu; kamu harus menaikkan z-index induk pembentuk konteks, atau memindahkan elemen keluar dari konteks itu.

Berapa nilai maksimal z-index?

Nilai maksimal z-index adalah 2147483647 — batas atas bilangan bulat 32-bit bertanda (2 pangkat 31, dikurangi 1). Nilai yang lebih besar akan dipotong ke angka tersebut oleh browser. Tapi kalau kamu sampai butuh angka itu, hampir pasti masalah sebenarnya ada di stacking context, bukan di besarnya angka — angka maksimal pun tetap kalah kalau induknya berada di konteks yang lebih rendah.

Apa itu stacking context?

Stacking context adalah kelompok tumpukan tersendiri: semua z-index anak di dalamnya hanya dibandingkan dengan sesama anggota konteks yang sama. Antar konteks, yang dibandingkan adalah z-index elemen pembentuk konteksnya. Stacking context terbentuk antara lain oleh elemen positioned dengan z-index selain auto, position: fixed/sticky, opacity di bawah 1, transform selain none, filter, dan isolation: isolate.

z-50 di Tailwind artinya apa?

z-50 adalah utility class Tailwind yang menghasilkan z-index: 50 — level tertinggi di skala bawaan Tailwind (z-0 sampai z-50, kelipatan 10), dan secara konvensi dipakai untuk modal, drawer, dan overlay. Seperti z-index biasa, z-50 hanya bekerja jika elemennya juga diberi utility position (relative, absolute, fixed, atau sticky). Butuh lebih tinggi dari 50? Pakai nilai arbitrer seperti z-[60].

Apakah z-index bisa bernilai negatif?

Bisa. Z-index negatif (misalnya z-index: -1, atau -z-10 di Tailwind) menempatkan elemen di belakang konten se-konteksnya — berguna untuk elemen dekoratif seperti blob warna atau pola background. Hati-hati: elemen ber-z-index negatif bisa tenggelam di belakang background induk kalau induknya tidak membentuk stacking context, sehingga terlihat “hilang”.

Langkah Selanjutnya

Sekarang kamu pegang peta lengkapnya: z-index mengatur tumpukan di sumbu Z, hanya aktif pada elemen positioned (atau flex/grid item), dan angkanya cuma berlaku di dalam stacking context masing-masing — itulah kenapa memahami konteks jauh lebih penting daripada menaikkan angka. Ditambah skala layering yang konsisten (navbar 40, modal 50), sebagian besar drama tumpukan di proyekmu selesai sebelum dimulai.

Seperti biasa, konsep tumpukan baru benar-benar melekat setelah kamu melihat elemen-elemen saling menimpa dan memindah-mindahkannya sendiri. Coba mainkan playground z-index interaktif — kamu bisa mengubah nilai z-index dan position secara langsung dan melihat lapisan-lapisannya bergeser real-time, tanpa perlu setup apa pun. Selamat menumpuk dengan percaya diri!