Z-Index

Begitu elemen mulai keluar dari alur — badge menimpa sudut kartu, banner menutup konten — pertanyaan baru muncul dengan sendirinya: ketika dua elemen bertumpuk pada tempat yang sama, siapa yang berhak tampil di atas? Jawaban default browser adalah urutan dokumen, dan alat untuk menuliskannya ulang adalah z-index. Pada chapter ini kita mempelajari perilaku default penumpukan, syarat z-index agar bekerja, dan cara memilih angka yang tidak membuat kode kita menjadi sarkasme bernilai 99999.

Urutan Tumpuk Default #

Tanpa z-index, browser merender elemen mengikuti urutan dokumen: elemen yang muncul kemudian dirender di atas elemen yang muncul lebih dulu. Untuk elemen positioned, aturan ini terasa jelas — badge di akhir markup menimpa kartu di awalnya. Aturan default ini menjelaskan demo pada chapter Static: Kotak B menang atas Kotak A murni karena muncul kemudian, bukan karena kekuatan apa pun.

Urutan dokumen sering kali sudah cukup, dan menambahkan z-index di setiap elemen justru menambah beban perawatan. Nilai ini kita butuhkan ketika urutan markup tidak sesuai dengan urutan tumpuk yang kita inginkan.

Syarat z-index Bekerja #

z-index menerima bilangan bulat — positif, nol, atau negatif — tanpa satuan. Namun ia hanya berpengaruh pada dua jenis elemen:

.lencana-notifikasi {
  position: absolute;
  z-index: 2;
}

Pada elemen static, z-index sama sekali diabaikan — pengingat lain mengapa nilai position selalu menjadi pertanyaan pertama saat debugging.

Dua detail penulisan juga layak diingat. Pertama, z-index tidak diwariskan: nilai pada induk tidak otomatis mengalir ke anaknya, masing-masing elemen menghitung punya sendiri. Kedua, nilainya harus bilangan bulat polos — z-index: 10px tidak valid, dan seluruh deklarasi itu diabaikan browser tanpa pesan.

Baris pertama tanpa z-index, baris kedua dengan skala kecil 1–3, keduanya memakai markup dengan urutan yang sama:

Perbandingannya terjadi antar saudara di dalam satu wadah — kata kunci untuk chapter berikutnya.

Memilih Angka yang Wajar #

Kesalahan yang paling mudah dihindari: memakai angka raksasa. z-index bukan kompetisi jarak — di dalam satu komponen, rentang 0 sampai 10 hampir selalu cukup. Yang penting adalah konsistensi antar lapisan komponen:

.dropdown-menu {
  z-index: 10;
}

.backdrop-modal {
  z-index: 20;
}

.toast-notifikasi {
  z-index: 30;
}

Skala kecil yang terdokumentasi — biasanya ditulis sebagai komentar di awal berkas CSS — jauh lebih mudah dijaga daripada deretan 9999 yang terus saling menyalip. Nilai negatif juga sah: z-index: -1 menempatkan elemen di belakang konten alur pada lingkup yang sama, cocok untuk latar dekoratif, tetapi gunakan dengan kesadaran penuh karena elemennya mudah tak sengaja tertutup.

auto versus 0 #

Sering muncul pertanyaan: apa bedanya tidak menulis z-index (auto) dengan menulis z-index: 0? Dari sisi tampilan, keduanya berada pada lapisan positioned yang sama — urutan dokumen yang memutuskan bila nilainya bentrok. Bedanya bersifat struktural: bilangan bulat apa pun, termasuk 0, membuat elemen tersebut membentuk stacking context — lingkup isolasi untuk perhitungan tumpukan — sedangkan auto tidak. Konsekuensi perbedaan ini baru terasa ketika elemen memiliki keturunan yang juga diberi z-index; kita bedah tuntasnya pada chapter berikutnya.

Kesalahan Umum #

Ringkasan #

Tumpukan default mengikuti urutan dokumen; z-index menuliskannya ulang untuk elemen positioned — dan item flex/grid — dengan bilangan bulat yang bekerja antar saudara dalam lingkup yang sama. Skala kecil yang konsisten mengalahkan angka raksasa, dan nilai negatif adalah alat khusus untuk latar dekoratif. Namun “lingkup yang sama” menyimpan kejutan terbesar chapter ini: elemen dengan z-index: 999 bisa kalah dari z-index: 1 — rahasia itu bernama stacking context, topik penuh chapter berikutnya.