Wie funktionieren z-index und stacking contexts?

Question

Accepted Answer

`z-index` steuert die **front-to-back** Stacking-Reihenfolge überlappender Elemente — höhere Werte liegen oben. Es funktioniert jedoch nur auf **positionierten** Elementen und operiert *innerhalb* eines **stacking context**, was die Quelle der meisten z-index-Verwirrungen ist.

```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` wird auf `position: static` (Standard) **ignoriert** — das Element muss `relative`, `absolute`, `fixed` oder `sticky` sein, damit es gilt.

## Stacking contexts — die Falle

Ein stacking context ist eine in sich geschlossene "Schicht". `z-index`-Werte konkurrieren nur **innerhalb desselben Kontexts** — ein Kind kann niemals die Stacking-Ebene seines Elternelements verlassen, egal wie hoch sein z-index ist.

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

Dies ist der klassische Fehler "mein z-index: 9999 Modal ist immer noch hinter etwas" — das Modal ist in einem Eltern-Element gefangen, das auf einer niedrigeren Ebene liegt.

## Was erstellt einen neuen stacking context

Viele Eigenschaften erstellen einen stillschweigend, was Nachkommen abfangen kann:

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

## Die Lösung

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

In der Praxis sollten Modals/Tooltips oben im DOM gerendert werden (React portals), damit sie nicht in einem Element mit niedriger Schicht gefangen sind.

## Warum es wichtig ist

Stacking contexts erklären die verwirrendsten z-index-Fehler: ein riesiger z-index, der immer noch verliert, weil sein Vorfahre auf einer niedrigeren Ebene ist.

Wenn Sie wissen, dass `opacity`, `transform` und positioned-z-index Kontexte erstellen — und dass Kinder ihnen nicht entkommen können — können Sie Overlay-/Dropdown-Sortierung debuggen und Ihr DOM (Portals) korrekt strukturieren.