z-index ovládá pořadí skládání prvků ze přední na zadní u překrývajících se prvků — vyšší hodnoty jsou nahoře. Ale funguje pouze na pozicovaných prvcích a funguje v rámci stacking contextu, což je zdrojem většiny zmatků kolem z-indexu.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index je ignorován na position: static (výchozí) — aby se aplikoval, musí být prvek relative, absolute, fixed nebo sticky.
Stacking context je samostatná "vrstva". Hodnoty z-index konkurují pouze v rámci stejného kontextu — dítě nikdy nemůže uniknout vrstvě skládání svého nadřazeného prvku, bez ohledu na to, jak vysoký je jeho 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). */
Toto je klasická chyba "můj z-index: 9999 modal je stále za něčím" — modal je uváznut v nadřazeném prvku, který je na nižší vrstvě.
Mnohé vlastnosti jej tiše vytvářejí, což může uvěznit potomky:
- 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 praxi vykreslete modaly/tooltips na vrcholu DOM (React portals), aby nebyly uváznuty v nadřazeném prvku s nižší vrstvou.
Stacking contexts vysvětlují nejmatoucnější chyby z-indexu: obrovský z-index, který stále prohrává, protože jeho předek je na nižší vrstvě.
Vím, že opacity, transform a positioned-z-index vytváří kontexty — a že dítě z nich nemohou uniknout — vám umožňuje ladit pořadí překrytí/rozbalovacího seznamu a správně strukturovat váš DOM (portaly).