Position & Stacking
Mit position löst du ein Element aus dem normalen Fluss und schiebst es gezielt. Mit z-index bestimmst du, was vorne liegt. Klingt simpel — ist aber die Quelle der mysteriösesten Bugs („mein Menü liegt hinter dem Bild und nichts hilft").
Die fünf Werte: static (Default, im Fluss) · relative (verschoben, Platz bleibt reserviert) · absolute (aus dem Fluss, an nächstem positioniertem Vorfahren) · fixed (am Viewport) · sticky (klebt beim Scrollen).
Playground: wie sich das mittlere Kästchen verhält
.container ist position: relative
1
2
3
position (Kästchen 2)
CSSdein Beispiel
.container { position: relative; }
.box-2 {
position: relative;
top: 20px;
left: 40px;
}z-index — was liegt vorne?
z-index bestimmt die Stapel-Reihenfolge — aber nur bei positionierten Elementen (also nicht bei static). Höher = weiter vorne.
CSS
.modal { position: fixed; z-index: 100; }
.overlay { position: fixed; z-index: 90; }
.tooltip { position: absolute; z-index: 10; }Warum eigentlich? — Warum ignoriert der Browser meinen z-index?
Der häufigste Grund: das Element ist position: static (der Default). z-index wirkt nur auf relative, absolute, fixed oder sticky. Setz eine Position (oft reicht position: relative ohne top/left) und der z-index greift plötzlich.
Häufiger Denkfehler — z-index: 999999 löst gar nichts
Wenn ein Element mit z-index: 9999 immer noch hinter etwas mit z-index: 2 liegt, sitzt es in einem anderen Stacking Context. z-index vergleicht nur innerhalb desselben Kontexts — ein Kind kann seinen Eltern-Kontext nie verlassen, egal wie hoch die Zahl. Riesige z-index-Werte sind ein Symptom, keine Lösung — und ein klassisches Zeichen, dass jemand (oft eine KI) das eigentliche Problem nicht erkannt hat.
Tiefer rein — Was einen Stacking Context erzeugt
Ein neuer Stapel-Kontext entsteht u.a. durch:
- position + z-index (außer auto)
- opacity kleiner als 1
- transform, filter, perspective
- will-change, isolation: isolate