z-index mengawal susunan depan-ke-belakang bagi elemen yang bertindih — nilai yang lebih tinggi berada di atas. Tetapi ia hanya berfungsi pada elemen berposisi (positioned), dan ia beroperasi dalam satu stacking context, iaitu punca kebanyakan kekeliruan z-index.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index diabaikan pada position: static (lalai) — elemen mesti relative, absolute, fixed, atau sticky untuk ia berkesan.
Stacking context ialah satu "lapisan" tersendiri. Nilai z-index hanya bersaing dalam context yang sama — anak tidak pernah boleh melepasi tahap stacking induknya, tidak kira betapa tingginya 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 ialah pepijat klasik "modal z-index: 9999 saya masih di belakang sesuatu" — modal itu terperangkap di dalam induk yang berada pada lapisan lebih rendah.
Banyak property mencipta satu secara senyap, yang boleh memerangkap turunan:
- 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 amalan, render modal/tooltip di bahagian atas DOM (React portal) supaya ia tidak terperangkap dalam induk berlapisan rendah.
Stacking context menjelaskan pepijat z-index yang paling membingungkan: z-index yang besar tetapi masih kalah kerana moyangnya berada pada lapisan lebih rendah.
Mengetahui bahawa opacity, transform, dan z-index-berposisi mencipta context — dan bahawa anak tidak boleh melepasinya — membolehkan anda menyahpepijat susunan overlay/dropdown dan menstrukturkan DOM anda (portal) dengan betul.