Come funzionano z-index e i stacking context?

Question

Accepted Answer

`z-index` controlla l'ordine di **sovrapposizione** front-to-back degli elementi sovrapposti — i valori più alti stanno in primo piano. Ma funziona solo su elementi **posizionati**, e opera *all'interno* di uno **stacking context**, che è la fonte della maggior parte della confusione su 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` viene **ignorato** su `position: static` (il default) — l'elemento deve essere `relative`, `absolute`, `fixed`, o `sticky` affinché si applichi.

## Perché è importante

Uno stacking context è un "layer" auto-contenuto. I valori di `z-index` competono solo **all'interno dello stesso context** — un figlio *non potrà mai* sfuggire al livello di stacking del genitore, indipendentemente da quanto alto sia il suo 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). */
```

Questo è il classico bug "il mio modal con z-index: 9999 è ancora dietro qualcosa" — il modal è intrappolato dentro un genitore che è su un layer inferiore.

## Cosa crea un nuovo stacking context

Molte proprietà ne creano uno silenziosamente, il che può intrappolate i discendenti:

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

## La soluzione

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

In pratica, renderizza i modal/tooltip in cima al DOM (React portals) così non rimangono intrappolati in un genitore su un layer basso.

## Perché è importante

Gli stacking context spiegano i bug di z-index più sconcertanti: un enorme z-index che comunque perde perché il suo antenato è su un layer inferiore.

Sapere che `opacity`, `transform`, e positioned-z-index creano context — e che i figli non possono sfuggirvi — ti permette di debuggare l'ordinamento degli overlay/dropdown e strutturare correttamente il tuo DOM (portals).