Hur fungerar z-index och stacking-kontexter?

Question

Accepted Answer

`z-index` kontrollerar **fram-till-bak** staplingsordningen för överlappande element — högre värden ligger överst. Men det fungerar bara på **positionerade** element, och det fungerar *inom* en **stacking-kontext**, vilket är källan till det mesta av förvirringen kring 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` **ignoreras** på `position: static` (standard) — elementet måste vara `relative`, `absolute`, `fixed` eller `sticky` för att det ska tillämpas.

## Stacking-kontexter — fällan

En stacking-kontext är en självständig "lager". `z-index`-värden konkurrerar bara **inom samma kontext** — ett barn kan *aldrig* fly sitt förälders staplignivå, oavsett hur högt dess z-index är.

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

Detta är den klassiska "mitt z-index: 9999 modal är fortfarande bakom något" buggen — modalen är fångad inuti en förälder som ligger på en lägre nivå.

## Vad skapar en ny stacking-kontext

Många egenskaper skapar tyst en sådan, vilket kan fånga efterkommande:

```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 praktiken renderas modaler/verktygstips överst i DOM (React portals) så de inte blir fångade i en lågnivå förälder.

## Varför det är viktigt

Stacking-kontexter förklarar de mest förvirrande z-index buggen: ett enormt z-index som ändå förlorar för att dess förfader är på en lägre nivå.

Att veta att `opacity`, `transform` och positionerat z-index skapar kontexter — och att barn inte kan fly dem — låter dig felsöka ordningen på överlägg/rullgardiner och strukturera din DOM (portals) korrekt.