z-index kontrolira redoslijed steka ispred-iza koji se preklapaju — veće vrijednosti sjede na vrhu. Ali funkcionira samo na pozicioniranim elementima, i radi unutar konteksta steka, što je izvor većine zbunjenosti s z-index.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index je ignoriran na position: static (zadana vrijednost) — element mora biti relative, absolute, fixed, ili sticky da se primijeni.
Kontekst steka je samodrživna "sloj". Vrijednosti z-index se natječu samo u istom kontekstu — dijete nikad ne može izbjeći razinu steka svoje roditeljske, bez obzira na njegovu z-index vrijednost.
.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). */
Ovo je klasična greška "moja z-index: 9999 modalna je i dalje iza nečega" — modalna je zarobljena unutar roditelja koji je na nižoj razini.
Mnoga svojstva tiho stvaraju jedan, što može zarobiti potomke:
- 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 */
U praksi, renderira modalne/savjete na vrhu DOM-a (React portals) kako ne bi bili zarobljeni u roditeljskom s nižom razinom.
Konteksti steka objašnjavaju najzbunjujuće z-index greške: ogromna z-index koja i dalje gubi jer je njen prednik na nižoj razini.
Znajući da opacity, transform, i positioned-z-index kreiraju kontekste — i da djeca ne mogu iz njih izbjeći — možete ispravljati greške nasljeđivanja/padajućeg izbornika i pravilno strukturirati DOM (portals).