z-index mengontrol urutan staking depan-belakang elemen yang tumpang tindih — nilai yang lebih tinggi duduk di atas. Tetapi hanya bekerja pada elemen yang diposisikan, dan beroperasi di dalam stacking context, yang merupakan sumber sebagian besar kebingungan z-index.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index diabaikan pada position: static (default) — elemen harus relative, absolute, fixed, atau sticky agar berfungsi.
Stacking context adalah "lapisan" yang mandiri. Nilai z-index hanya bersaing dalam konteks yang sama — anak tidak pernah bisa melarikan diri dari tingkat staking induknya, tidak peduli seberapa tinggi z-index-nya.
.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }
.child-of-a { position: absolute; z-index: 9999; }
/* ❌ child-of-a STILL renders below everything in parent-b, */
/* because parent-a (z-index 1) is entirely below parent-b (z-index 2). */
Ini adalah bug klasik "modal z-index: 9999 saya masih di belakang sesuatu" — modal terperangkap di dalam induk yang berada di lapisan yang lebih rendah.
Banyak properti diam-diam membuat satu, yang dapat menjebak keturunan:
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
Dalam praktiknya, render modals/tooltips di bagian atas DOM (React portals) agar tidak terperangkap di induk lapisan rendah.
Stacking contexts menjelaskan bug z-index yang paling membingungkan: z-index yang sangat besar tetapi masih kalah karena leluhurnya berada di lapisan yang lebih rendah.
Mengetahui bahwa opacity, transform, dan positioned-z-index membuat konteks — dan bahwa anak-anak tidak bisa melarikan diri dari mereka — memungkinkan Anda untuk men-debug urutan overlay/dropdown dan membuat struktur DOM (portals) dengan benar.