z-index dan susunan lapisan

Atur elemen mana tampil di atas ketika bertumpuk.

Pahami konsepnya

Saat elemen bertumpang tindih (karena position absolute/fixed atau margin negatif), z-index memutuskan siapa di atas: nilainya bilangan bulat bebas — elemen bernilai lebih tinggi menang, dan elemen tanpa z-index berdiri di urutan kode (yang belakangan menimpa). Pasangannya wajib: z-index hanya berlaku pada elemen ber-position selain static (atau elemen flex/grid anak).

Kenyataan pahitnya: z-index bukan satu tangga global. Elemen dengan position sekaligus z-index menciptakan "stacking context" — dunia lapisan tersendiri yang anak-anaknya hanya bertarung di dalamnya. Navbar z-index 999 bisa kalah oleh modal z-index 1 jika modal hidup di dalam induk ber-z-index lebih tinggi. Gejala "kenapa z-index 9999-ku kalah" hampir selalu berakar pada konteks bersarang ini.

Kebiasaan sehat: gunakan nilai bertingkat konsisten (10 dropdown, 100 navbar, 1000 modal, 2000 toast) dan kendalikan sedikit induk mungkin. Semakin sedikit elemen yang membuat stacking context, semakin bisa diprediksi lapisanmu — dan semakin jarang kamu berdialog dengan z-index: 99999.

Coba contoh kode

.navbar {
  position: fixed;
  z-index: 100;   /* tingkat: navigasi */
}

.dropdown {
  position: absolute;
  z-index: 110;   /* sedikit di atas navbar */
}

.modal {
  position: fixed;
  z-index: 1000;  /* tingkat: jendela modal */
}

.toast {
  position: fixed;
  z-index: 2000;  /* tingkat: notifikasi teratas */
}

Tangga bertingkat (10-100-1000-2000) memberi ruang untuk sisipan di masa depan — dropdown baru cukup ambil 120, tak perlu perang angka. Perhatikan semua peserta ber-position: z-index tanpa position pada elemen static hanyalah angka kesepian yang tak didengar siapa pun.

Latihan singkat

Bangun tiga lapis (kartu, dropdown di dalam kartu, modal global) dengan tangga z-index yang rapi, lalu uji menempatkan modal di dalam induk ber-z-index rendah untuk melihat gejala konteks bersarang.