Kalau dua elemen menempati tempat yang sama, salah satunya pasti menutupi yang lain. Bayangin beberapa lembar kertas yang ditumpuk di meja: lembar paling atas kelihatan utuh, lembar di bawahnya ketutup sebagian. z-index adalah nomor lapisan buat tiap elemen di tumpukan itu: makin besar angkanya, makin atas posisinya.
🧪 Tebakan cepat:
div { z-index: 999; }, tanpa properti lain. Div-nya naik ke paling atas gak? Tebak dulu, jawabannya ada di bagian "Syaratnya: position".
Angka besar di atas, angka kecil di bawah
Dua kotak ini sengaja dibikin saling menimpa:
<div class="merah">merah</div>
<div class="hijau">hijau</div>
<style>
div {
width: 120px;
height: 80px;
}
.merah {
position: relative;
z-index: 4;
background: red;
}
.hijau {
position: absolute;
top: 60px;
left: 80px;
z-index: 3;
background: green;
}
</style>
divmemberi kedua kotak ukuran yang sama, 120 x 80 piksel..hijaudigeser pakaiposition: absolute,topdanleftsampai menimpa pojok kanan bawah kotak merah.z-index: 3adalah nomor lapisan kotak hijau.z-index: 4adalah nomor lapisan kotak merah. 4 lebih besar dari 3, jadi merah ada di atas.
Hasilnya, bagian yang tumpang tindih menampilkan kotak merah, dan kotak hijau ketutup di bagian itu. Kalau dua elemen gak punya z-index, atau angkanya sama, yang ditulis belakangan di HTML yang tampil di atas. Jadi buat menang, angkanya harus lebih besar, gak cukup sama.
Syaratnya: position
z-index cuma berlaku buat elemen yang position-nya bukan static, misalnya relative atau absolute. Semua elemen mulai dengan position: static, jadi div { z-index: 999; } gak ngapa-ngapain. Itu jawaban tebakannya: gak naik. Perbaikannya, tambahkan position:
div {
position: relative;
z-index: 999;
}
Di latihan, kotak yang mau kamu naikkan sudah punya position: absolute. Kamu tinggal menambah satu baris z-index di aturan yang sama, dengan angka lebih besar dari kotak yang sekarang menutupinya.
⚠️ Jebakan yang sering ketemu
- Angka yang sama.
z-index: 4lawanz-index: 4dimenangkan elemen yang ditulis belakangan. Kasih angka yang lebih besar. - Anak gak bisa menembus induknya. Kalau induknya punya
positiondanz-indexsendiri, angka di anaknya cuma bersaing dengan saudara-saudaranya di dalam induk itu. Tumpukan di dalam induk ini disebut stacking context. - Angka raksasa.
z-index: 99999susah dirawat. Pakai langkah kecil yang teratur, misalnya 1, 2, 3 atau 10, 20, 30.
💡 Satu pengecualian. Anak langsung dari flexbox atau grid bisa pakai
z-indexwalauposition-nya masihstatic.
TL;DR: z-index adalah nomor lapisan: angka lebih besar tampil di atas angka lebih kecil, dan kalau sama, yang ditulis belakangan menang. Dia cuma jalan di elemen yang position-nya bukan static, jadi pasangkan dengan position: relative atau absolute. Anak gak bisa menembus tumpukan induknya yang punya z-index sendiri.
