z-index kontrolira vrstni red prekrivanja elementov od spredaj navzaj — višje vrednosti so na vrhu. Vendar deluje samo na pozicionirani elementih in operira znotraj stacking konteksta, kar je vir večine zmede z z-indexom.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index je prezrt pri position: static (privzeto) — element mora biti relative, absolute, fixed ali sticky, da se uporabi.
Stacking kontekst je samostojna "plast". Vrednosti z-index se tekmujejo samo znotraj istega konteksta — otrok nikoli ne more pobegniti nivoju stacking konteksta svojega starša, ne glede na to, kako visok je njegov z-index.
.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). */
To je klasična napaka "moj z-index: 9999 modal je še vedno za nečim" — modal je ujet znotraj starša, ki je na nižji plasti.
Mnoge lastnosti jih tiho ustvarjajo, kar lahko ujame potomce:
- 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 */
V praksi upodabljajte modalne okne in namige na vrhu DOM (React portali), da niso ujeti v nizkoplastnega starša.
Stacking konteksti razlagajo najbolj zmešnjujočo napake z z-indexom: ogromna z-indexna vrednost, ki še vedno izgubi, ker je njen prednik na nižji plasti.
Znanje, da opacity, transform in pozicionirani z-index ustvarjajo kontekste — in da otroci ne morejo pobegniti — vam omogoča razreševanje napak pri urejanju prekrivov/spustnih seznamov in pravilno strukturirate DOM (portale).