Z-index adalah properti CSS yang mengatur urutan tumpukan elemen — angka lebih besar tampil makin di depan, menutupi elemen dengan angka lebih kecil. Syaratnya satu: elemen harus punya position selain static.
🎯 Z-index gak jalan? Cek urutan ini. 1) Elemennya udah punya
positionselainstatic? 2) Angkanya kalah sama tetangganya? 3) Parent-nya bikin stacking context baru (misalnya adaopacitydi bawah 1 atautransform)? Nomor 3 ini yang paling sering bikin pemula bingung.
Layar HP itu sebenernya 2 dimensi (lebar × tinggi). Tapi pas ada modal muncul nge-overlay konten, atau dropdown menu yang nutupin tombol di bawahnya, kerasanya kayak 3D — ada lapisan depan dan belakang. Sumbu ke-3 itu yang dikontrol z-index. Angka makin gede = makin maju ke depan, nutupin yang angkanya lebih kecil. Tapi awas — z-index cuma jalan kalau elemen punya position selain static. Aturan klasik yang sering dilewatin pemula.
Berikut contoh penggunaan properti z-index:
z-index: 2;
⚠️ Catatan penting:
z-indexcuma berlaku dalam stacking context yang sama. Mau setinggi9999pun, gak bisa nembus stacking context lain. Detail lengkap di analogi UNO di bawah.
🎭 Analogi sehari-hari
Bayangin lagi main UNO bareng temen. Kartu yang baru kamu taro otomatis nempel paling atas, nutupin yang tadi. z-index cara kerjanya mirip — angka makin gede, makin naik ke atas tumpukan. Tapi ada plot twist yang bikin banyak orang kena jebakan Batman: tiap stacking context itu kayak meja yang beda. Walau kamu numpukin kartu setinggi langit di meja A (z-index: 9999), tetep gak bisa nyentuh satu kartu pun di meja B yang lebih atas. Modal yang stuck di belakang konten lain? Biasanya dia kejebak di meja yang salah — pindahin render-nya langsung ke <body> biar dapet meja utama yang gak ada saingannya.
⚠️ Jebakan yang sering ditemui
z-indexbutuhpositionselainstatic— paling sering bug. Setposition: relative+z-index: 10.- Stacking context = kotak dalam kotak.
z-index: 9999di dalam parent context cuma menang dalam parent itu, tidak global. - Apa yang BIKIN stacking context baru:
position+z-indexselain auto,opacity < 1,transform,filter,will-change,isolation: isolate. Sering surprise. z-index: 9999999= bau code. Pakai sistem (10, 20, 30) atau CSS variable (--z-modal: 100).- Modal di dalam transformed parent kena masalah z-index — pakai portal ke
<body>. - Negative
z-index= di belakang background. Useful untuk pseudo-element decoration.
🧪 Tebakan cepat — stacking context. Tanpa render, tebak elemen mana yang di paling atas:
<div style="position: relative; z-index: 1"> <div style="position: relative; z-index: 999">A</div> </div> <div style="position: relative; z-index: 2"> <div style="position: relative; z-index: 0">B</div> </div>Jawaban: B menang. Walau A punya
z-index: 999, parent-nya cumaz-index: 1. Parent B =z-index: 2> parent A = 1. Itu sebab "kotak A" tetap di belakang "kotak B" — gak peduli isi Az-indexsetinggi langit. Stacking context = kotak dalam kotak.
TL;DR: z-index ngatur urutan tumpuk elemen di sumbu Z (depan/belakang). Cuma jalan di elemen position selain static. Beroperasi di stacking context — tiap context = "meja sendiri" yang gak bisa nembus context lain. transform, opacity < 1, filter, will-change BIKIN context baru.
