Cum funcționează z-index și stacking contexts?

Question

Accepted Answer

`z-index` controlează ordinea de stivuire **de la față la spate** a elementelor suprapuse — valorile mai mari se află deasupra. Dar funcționează doar pe elemente **positioned** și funcționează *în cadrul* unui **stacking context**, care este sursa majorității confuziei cu z-index.

```css
.modal   { position: fixed; z-index: 100; }   /* on top */
.overlay { position: fixed; z-index: 99; }    /* just below */
.content { position: relative; z-index: 1; }
```

`z-index` este **ignorat** pe `position: static` (implicitul) — elementul trebuie să fie `relative`, `absolute`, `fixed` sau `sticky` pentru ca acesta să se aplice.

## Stacking contexts — capcanele

Un stacking context este un "strat" autoconținut. Valorile `z-index` concurează doar **în cadrul aceluiași context** — un copil nu poate niciodată scăpa de nivelul de stivuire al părintelui, indiferent cât de mare este z-index.

```css
.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). */
```

Acesta este clasicul bug "modalul meu z-index: 9999 este încă în spatele ceva" — modalul este capturat într-un părinte care se află pe un strat mai jos.

## Ce creează un nou stacking context

Multe proprietăți creează în tăcere una, care poate captiva descendenți:

```text
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
```

## Soluția

```css
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
```

În practică, redați modale/tooltips în vârful DOM (React portals) pentru ca acestea să nu fie captive într-un părinte de strat mai jos.

## De ce este important

Stacking contexts explică cele mai confuze buguri cu z-index: un z-index imens care încă pierde pentru că strămoșul său se află pe un strat mai jos.

Știind că `opacity`, `transform` și positioned-z-index creează contexte — și că copiii nu pot scăpa din ele — te permite să depanezi ordinea suprapuneri/dropdown și să structurezi corect DOM (portals).