Hvordan fungerer z-index og stacking contexts?

Question

Accepted Answer

`z-index` kontrollerer **front-til-bakgrunn** staplingsrekkefølgen av overlappende elementer — høyere verdier sitter på toppen. Men det fungerer kun på **positioned** elementer, og det fungerer *innen* en **stacking context**, som er kilden til de fleste z-index-forvirringar.

```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` blir **ignorert** på `position: static` (standard) — elementet må være `relative`, `absolute`, `fixed`, eller `sticky` for at det skal fungere.

## Stacking contexts — fellen

En stacking context er en selvforsynt "lag." `z-index` verdier konkurrerer kun **innen samme kontekst** — et barn kan aldri unnslippe forelderens staplingsnivå, uansett hvor høy z-index er.

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

Dette er den klassiske "min z-index: 9999 modal er fortsatt bak noe" feilen — modalen er fanget inne i en forelder som er på et lavere lag.

## Hva skaper en ny stacking context

Mange egenskaper skaper stilig en, som kan fange etterkommer:

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

## Løsningen

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

I praksis gjengir du modals/tooltips på toppen av DOM (React portals) slik at de ikke blir fanget i en lavere-lag forelder.

## Hvorfor det er viktig

Stacking contexts forklarer de mest forvirrende z-index-feilen: en enorm z-index som fortsatt taper fordi dens forfar er på et lavere lag.

Av å vite at `opacity`, `transform`, og positioned-z-index skaper kontekster — og at barn ikke kan unnslippe dem — kan du debugge overlay/dropdown-rekkefølge og strukturere DOM (portals) riktig.