CSS Z-Index: Bikin Layer Webmu Tertata Rapi

Pernah nggak sih, kamu bikin elemen pop-up atau dropdown, tapi malah ketutup elemen lain? Atau bikin tombol, tapi background justru nongol di atasnya? Kalau iya, bisa jadi kamu belum mengenal z-index di CSS.

Yup, z-index adalah kunci untuk mengatur tumpukan elemen (layer) di web. Dengan z-index, kamu bisa menentukan elemen mana yang tampil di depan, mana yang di belakang — layaknya menyusun tumpukan kertas digital.

Yuk, pelajari cara kerja z-index dan gimana penggunaannya bisa bikin layout web kamu jauh lebih rapi!

---

Apa Itu z-index dan Kenapa Penting?

Secara sederhana, z-index menentukan urutan kedalaman (z-axis) elemen di halaman web. Semakin tinggi nilai z-index, semakin “di depan” posisi tampilnya.

Contoh situasi saat kamu butuh z-index:

• Modal/pop-up tertutup background
• Dropdown tertutup elemen lain
• Sticky header tertimpa konten
• Elemen interaktif nggak bisa diklik karena ketumpuk

Kalau layout web kamu mulai “tabrakan”, artinya sudah waktunya pakai z-index.

baca juga : Gagal Responsif? Cek 7 Kesalahan CSS Ini!

---

Cara Kerja Dasar z-index

Untuk bisa pakai z-index, elemen harus memiliki position selain static:

cssSalinEdit.element {
  position: relative; /* atau absolute, fixed, sticky */
  z-index: 10;
}

Jika dua elemen bertumpuk, yang memiliki z-index lebih besar akan tampil di atas.

Contoh:

cssSalinEdit.box1 {
  position: relative;
  z-index: 1;
}

.box2 {
  position: relative;
  z-index: 2;
}

Dalam kasus di atas, .box2 akan berada di atas .box1.

---

Bagaimana Z-Index Menyusun Layer?

Z-index bekerja di dalam konteks stacking tertentu. Artinya, urutan layer bisa berubah tergantung struktur HTML dan konteks parent-nya.

Catatan penting:

• Elemen child tidak bisa “menembus” batas parent-nya kalau parent tidak memiliki z-index.
• Stacking context tercipta ketika parent memiliki position dan z-index atau properti lain seperti transform, opacity, filter, dll.

---

Contoh Kasus Sederhana

Dropdown yang Tertutup

htmlSalinEdit<div class="navbar">
  <div class="dropdown">Menu</div>
</div>
<section class="content">Konten utama</section>

Jika dropdown ketutup konten:

cssSalinEdit.navbar {
  position: relative;
  z-index: 10;
}

.content {
  position: relative;
  z-index: 1;
}

Solusi: pastikan navbar (tempat dropdown) punya z-index lebih besar.

---

Tips Gunakan z-index dengan Benar

✅ Gunakan nilai kecil dan logis
Biasakan gunakan z-index seperti 10, 20, 100, dst. Hindari 99999 kecuali benar-benar darurat.

✅ Gunakan layer skala
Contoh layering skala kecil:

• 10 → elemen biasa
• 20 → hover
• 30 → modal
• 100 → toast/alert

✅ Jangan semua elemen dikasih z-index
Gunakan hanya saat benar-benar perlu. Terlalu banyak z-index justru bikin konflik.

✅ Gunakan stacking context dengan bijak
Kalau perlu, set konteks sendiri dengan position + z-index di wrapper.

baca juga : Mahasiswa Teknik Sipil Universitas Teknokrat Indonesia Dikerahkan Akselerasi Pembangunan Masjid Al Hijrah Kota Baru

---

Pertanyaan Umum: (People Also Ask)

❓ Apakah elemen tanpa z-index bisa tetap tampil di atas?

Bisa. Urutan DOM (HTML) dan posisi (absolute/fixed) juga memengaruhi posisi tampil elemen jika z-index sama.

❓ Apa beda z-index 0 dan auto?

• z-index: auto → ikut konteks parent
• z-index: 0 → eksplisit di-set ke nol (bisa override auto dari elemen lain)

❓ Apakah z-index bisa bernilai negatif?

Bisa. Nilai negatif artinya elemen berada di belakang elemen lain.

cssSalinEdit.background {
  position: absolute;
  z-index: -1;
}

penulis : Bagas Reyhan N.