Ada gejala z-index yang membuat developer menggaruk kepala: elemen dengan nilai 999 tetap tersembam di bawah elemen bernilai 1, dan menaikkan angkanya tidak membantu sama sekali. Penyebabnya bukan bug browser, melainkan stacking context — lingkup isolasi yang membatasi perbandingan z-index agar tidak menyebar ke seluruh halaman. Pada chapter ini kita memetakan siapa pembentuknya, membuktikan isolasinya lewat demo, dan memanfaatkannya secara sadar dengan isolation: isolate.
Ruang Lingkup Perbandingan z-index #
Stacking context adalah lingkup tempat urutan tumpuk dihitung. Di dalamnya, z-index membandingkan elemen-elemen saudara secara lokal; hasilnya lalu dianggap satu kesatuan ketika lingkup itu sendiri dibandingkan dengan lingkup lain.
Konsekuensinya berlaku dua arah:
- Anak tidak bisa lolos: elemen dengan
z-index: 999di dalam konteks bernilai rendah tetap terkurung oleh konteksnya. Saat konteksnya kalah, seluruh isinya kalah — termasuk si 999. - Konteks yang menang membawa semua isinya: menaikkan
z-indexpada konteks pembentuknya sekaligus mengangkat seluruh keturunannya, tanpa menyentuh satu pun nilai anak.
Model mentalnya mirip folder: nilai z-index hanya bersaing dengan berkas-berkas di folder yang sama; folder A dan folder B diperbandingkan sebagai wadah utuh terlebih dahulu.
Grup A membentuk konteks dengan z-index: 1 dan grup B dengan z-index: 2, sementara Anak A membawa z-index: 999 dan Anak B hanya z-index: 0 pada kotak yang saling menimpa:
Browser membandingkan konteksnya dahulu — Grup B (2) mengalahkan Grup A (1) — sehingga seluruh isi Grup B, termasuk Anak B, dirender di atas seluruh isi Grup A; nilai 999 hanya berlaku di dalam konteksnya sendiri.
Siapa Pembentuk Stacking Context #
Berikut pemicu yang paling sering kita temui — daftar lengkapnya lebih panjang, tetapi lima baris ini menjelaskan sebagian besar kasus nyata:
| Pemicu | Contoh |
|---|---|
| Elemen root | <html> — konteks paling luar seluruh dokumen |
Positioned dengan z-index ≠ auto | position: relative; z-index: 1 |
opacity < 1 | Efek fade membentuk konteks selama nilainya bukan 1 |
transform ≠ none | Animasi geser, zoom, atau translateZ(0) |
filter ≠ none | blur(), drop-shadow(), dan kawan-kawannya |
isolation: isolate | Saklar eksplisit tanpa efek visual lain |
Dua baris di tengah paling sering mengejutkan: kita menambahkan efek fade opacity atau animasi transform pada kartu, dan tanpa sengaja membentuk konteks baru yang mengurung z-index semua keturunannya. Gejala “z-index mendadak tidak jalan” hampir selalu bermula di sini.
isolation: isolate sebagai Pagar #
Dari daftar pembentuk di atas, isolation: isolate istimewa karena tidak membawa efek visual apa pun — tugasnya satu: membentuk stacking context. Itu menjadikannya alat yang pas untuk memagari komponen:
.dropdown-komponen {
isolation: isolate; /* z-index anak tak lagi bersaing di luar komponen */
}Dengan pagar ini, z-index kecil di dalam dropdown tidak akan menembus halaman dan menimpa modal milik bagian lain. Sebaliknya, dropdown juga tak bisa diganggu gugat oleh z-index liar dari luar. Memasangnya pada akar setiap komponen kompleks adalah kebiasaan murah yang mencegah kejutan tumpukan jangka panjang.
Model Debugging Penumpukan #
Saat elemen tertimpa padahal z-index-nya tinggi, telusuri rantai induknya dengan urutan berikut:
- Temukan konteks pembentuk terdekat — naik dari elemen itu ke atas, cari ancestor dengan pemicu pada tabel di atas.
- Bandingkan konteksnya dahulu — nilai
z-indexpada tingkat konteks yang kalah tidak bisa diselamatkan dari dalam. - Baru bandingkan di dalam — bila konteksnya menang, baru nilai
z-indexinternal yang menentukan.
Dengan tiga langkah ini, keputusan menaikkan nilai di anak, di induk, atau memindahkan elemen keluar dari konteks menjadi keputusan yang terarah — bukan percobaan-coba.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
z-index besar kalah dari nilai kecil | Konteks pembentuknya bernilai lebih rendah | Naikkan nilai konteks, atau keluarkan elemen dari konteks itu |
| Urutan tumpuk berubah setelah animasi ditambah | transform/opacity membentuk konteks baru | Sadari efek sampingnya; pagari dengan isolation: isolate |
| Komponen saling menimpa secara tak terduga | Semua z-index bersaing di konteks root | Isolasi tiap komponen dengan isolation: isolate |
Ringkasan #
Stacking context adalah lingkup isolasi yang membuat perbandingan z-index bersifat lokal: konteks dibandingkan sebagai kesatuan dahulu, lalu barulah isi di dalamnya. Pembentuknya yang paling umum — positioned dengan z-index, opacity, transform, filter, dan isolation: isolate — sering hadir diam-diam lewat efek dan animasi, sehingga model debugging tiga langkah di atas layak disimpan di kepala. Konsep terakhir pada section ini melengkapi semua bahasan: containing block, kotak acuan yang menentukan “dihitung relatif terhadap apa” bagi setiap nilai position.