Hvordan fungerer z-index og stacking contexts?

Question

Accepted Answer

`z-index` styrer **front-til-bag** stabelingsrækkefølgen for overlappende elementer — højere værdier ligger øverst. Men det fungerer kun på **positionerede** elementer, og det fungerer *inden for* en **stacking context**, som er kilden til det meste z-index-forvirring.

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

## Stacking contexts — faldgruben

En stacking context er en selvstændig "lag". `z-index`-værdier konkurrerer kun **inden for samme kontekst** — et barn kan aldrig undslippe sin forælders stapellag, uanset hvor høj dets 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 fejl "min z-index: 9999 modal er stadig bag noget" — modal'en er fanget inde i en forælder, der ligger på et lavere lag.

## Hvad opretter en ny stacking context

Mange egenskaber skaber en stiltiende, hvilket kan fange efterkommere:

```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 gengives modaler/tooltips øverst i DOM (React portals), så de ikke fanges i en lav-lag forælder.

## Hvorfor det betyder noget

Stacking contexts forklarer de mest forvirrende z-index-fejl: en kæmpe z-index, der stadig taber, fordi dens forfader er på et lavere lag.

Ved at vide, at `opacity`, `transform` og positioned-z-index opretter kontekster — og at børn ikke kan undslippe dem — kan du debugge overlay/dropdown-rækkefølge og strukturere din DOM (portals) korrekt.