z-index Ebenen
Visuelle Demo
Stapelkontext (Stacking Context)
Ein Stapelkontext wird durch jedes Element gebildet, das bestimmte Kriterien erfüllt (wie opacity < 1 oder transform). Einmal gebildet, sind seine Kindelemente in diesem Kontext gefangen.
opacity: 0.9
filter: blur()
transform: scale(1)
will-change
kontext_demo.css
.parent {
position: relative;
z-index: 1; /* Erzeugt einen Kontext */
}
.child {
position: absolute;
z-index: 999; /* Gefangen! */
}Kind (999)
Eltern (z:1)Nachbar (z:2)
Häufige Stolperfallen
Statische Position
z-index wird bei Elementen mit position: static (Standard) ignoriert. Verwenden Sie immer relative, absolute oder fixed.
Deckkraft & Transformationen
Das Setzen von opacity < 1 oder die Verwendung von transform erzeugt einen neuen Stapelkontext, selbst ohne z-index Wert.
Der ‘9999’-Krieg
Vermeiden Sie willkürlich hohe z-index Werte. Nutzen Sie eine konsistente Skala (10, 20, 30), um Ihre Ebenen überschaubar zu halten.