Warum z-index ignoriert wird, jede Eigenschaft, die einen Stacking Context erzeugt, eine 3D-Explosionsansicht der Ebenen, Sticky Header und Dropdowns, eine z-index-Skala und eine Checkliste zur Fehlersuche.
z-index legt die Reihenfolge überlappender Elemente fest, aber nur innerhalb desselben Stacking Context. Ein Kind mit z-index: 9999 kann nicht über ein Element außerhalb seines Elternelements steigen, wenn dieses Elternelement einen Context mit niedrigerem z-index bildet. Contexts entstehen durch position plus z-index, opacity unter 1, transform, filter, isolation: isolate und mehrere andere Eigenschaften.
Warum z-index scheinbar ignoriert wird
Symptom
Wahrscheinliche Ursache
z-index hat keine Wirkung
Das Element ist position: static und kein Flex- oder Grid-Kind
Riesiger z-index, trotzdem dahinter
Ein Vorfahre bildet einen Stacking Context auf einer niedrigeren Ebene
Dropdown unter dem nächsten Abschnitt versteckt
Das Elternelement hat transform, opacity oder filter
Menü am Rand abgeschnitten
overflow: hidden an einem Vorfahren, gar nicht z-index
Die 3D-Ansicht unten zieht eine kleine Seite in ihre Stacking-Ebenen auseinander, damit du siehst, welche Boxen in welchem Context gefangen sind. Ändere z-index-Werte und schalte die Eigenschaft um, die am Elternelement einen Context erzeugt. Danach folgen: alle Auslöser laut MDN, Sticky Header mit Dropdowns, eine Token-Skala und eine Schritt-für-Schritt-Routine zur Fehlersuche.
Setze z-index-Werte für den Header, die Karte und das Dropdown in der Karte.
Schalte an der Karte einen Auslöser für einen Stacking Context ein und beobachte, wie das Dropdown gefangen wird.
Aktiviere die 3D-Ansicht, um die Ebenen getrennt und nach Context gruppiert zu sehen.
Verwende isolation: isolate oder verschiebe das Dropdown aus dem Context heraus, um das Problem zu beheben.
Finde den Stacking Context, bevor du eine Zahl erhöhst. z-index innerhalb eines gefangenen Context zu erhöhen hilft nie.
Halte z-index-Werte in benannten Tokens mit Lücken dazwischen, damit neue Ebenen ohne Umnummerieren hineinpassen.
Verwende isolation: isolate an Komponenten, um ihre internen z-index-Werte einzuschließen, damit sie nicht mit dem Rest der Seite konkurrieren.
Für Modals und Popovers nutzen das native dialog-Element und das popover-Attribut den Top Layer, der über jedem z-index liegt.
Häufige Fragen
Warum funktioniert z-index nicht?
Entweder ist das Element nicht positioniert (z-index braucht eine position außer static oder ein Flex- oder Grid-Elternelement), oder es ist in einem Stacking Context gefangen. Die Position des Elternelements in seinem eigenen Context bestimmt das Ergebnis, und Kinder können ihm nicht entkommen, egal welche Zahl sie tragen.
Was erzeugt einen Stacking Context?
Das Root-Element, positionierte Elemente mit z-index, fixed- und sticky-Elemente, Flex- und Grid-Kinder mit z-index, opacity unter 1, Transforms, Filter, clip-path, Masken, mix-blend-mode, perspective, isolation: isolate, einige Werte von contain und will-change, Size Container und Elemente im Top Layer.
Was macht isolation: isolate?
Es erzeugt einen neuen Stacking Context und sonst nichts, ohne sichtbare Änderung. Setze es auf das Root-Element einer Komponente, damit Kinder mit negativem z-index hinter dem eigenen Hintergrund der Komponente bleiben, statt hinter die Seite zu fallen, und damit sich ihre internen Ebenen nie mit äußeren mischen.
Wie halte ich ein Dropdown über dem nächsten Abschnitt?
Gib dem Header oder Container mit dem Dropdown einen höheren z-index als den Abschnitten danach, wobei beide positioniert sind. Wenn der Container ein transform oder opacity hat, denk daran, dass er ein eigener Context ist, also muss der z-index an diesen Container, nicht an das Dropdown.
Ist ein negativer z-index sicher?
Er ist gültig, aber das Element rutscht hinter den Hintergrund seines Stacking Context. Ohne Context am Elternelement kann das hinter dem Seitenhintergrund und unsichtbar bedeuten. Setze isolation: isolate auf das Elternelement, um es drinnen zu halten.
Wie die Zeichenreihenfolge funktioniert
Innerhalb eines Stacking Context zeichnet der Browser in fester Reihenfolge: den eigenen Hintergrund des Context, dann Kinder mit negativem z-index, dann normalen Block-Inhalt, Floats, Inline-Inhalt, positionierte Elemente mit z-index auto oder 0 in Quelltextreihenfolge und zuletzt positive z-index-Werte von niedrig nach hoch.
Ein Kind-Context wird als eine Einheit an der Position seines Elternelements in dieser Liste gezeichnet. Alles darin wird nur gegen seine Geschwister sortiert. Genau deshalb verliert eine 9999 in einer Karte mit z-index: 1 gegen einen Nachbarn mit z-index: 2.
Eine Routine zur Fehlersuche
Prüfe zuerst, ob es wirklich ein Stacking-Problem ist: Wenn das Element an einer geraden Kante abgeschnitten wird, such stattdessen nach overflow an einem Vorfahren. Geh dann in den DevTools vom versteckten Element aufwärts und prüfe bei jedem Vorfahren die berechneten Styles auf die Auslöser, die auf dieser Seite aufgeführt sind.
Die Chromium DevTools haben ein Layers-Panel und Edge hat eine 3D-Ansicht, die zusammengesetzte Ebenen visuell zeigen. Sobald du den Vorfahren gefunden hast, der den Context bildet, heb entweder diesen Vorfahren an, entferne den Auslöser oder rendere das schwebende Element außerhalb davon.
Alles, was einen Stacking Context erzeugt
Basierend auf der MDN-Referenz zum Stacking Context. Eine einzige Bedingung genügt.
Auslöser für einen Stacking Context
Eigenschaft oder Zustand
Bedingung
Root-Element
html ist immer der Root-Stacking-Context
position: absolute oder relative
Nur mit einem z-index außer auto
position: fixed oder sticky
Immer, kein z-index nötig
Flex- oder Grid-Kind
Mit einem z-index außer auto, auch wenn position static ist
container-type: size oder inline-size
Jedes Element, das ein Size Query Container ist
opacity unter 1
Einschließlich opacity: 0.99
Jeder Wert außer normal
transform, scale, rotate, translate
Jeder Wert außer none
filter oder backdrop-filter
Jeder Wert außer none
Jeder Wert außer none
Jeder Wert außer none
mask, mask-image, mask-border
Jeder Wert außer none
isolation: isolate
Genau für diesen Zweck gemacht, ohne visuelle Nebenwirkungen
Nennt eine Eigenschaft, die beim Setzen einen Stacking Context erzeugen würde
layout, paint oder eine Kurzschreibweise, die sie enthält (strict, content)
Top Layer
Offener modaler dialog, Popover, Vollbild-Element und deren ::backdrop
Die Falle und die Lösungen
z-index 9999, das trotzdem verliert
Die blaue Karte ist ein Context mit z-index 1. Ihr Tooltip hat 9999, wird aber nur mit Elementen innerhalb der Karte verglichen, daher verdeckt ihn die orange Box mit z-index 2.
isolation: isolate hält eine negative Ebene drinnen
Ohne isolate würde die Dekoration mit z-index: -1 hinter den Hintergrund des Abschnitts fallen und verschwinden. Mit isolate ist der Abschnitt sein eigener Context.
Sticky Header mit Dropdown
Der Header ist sticky, also bereits ein Context. Gib ihm einen z-index über dem Inhalt, und das Dropdown darin erbt diese Ebene. Keine riesigen Zahlen nötig.
Normaler Inhalt
Beim Hover angehobene Karten, Sticky-Tabellenköpfe
Menüs, Autovervollständigungslisten
Sticky-Website-Header
Hintergrund eines Drawers
Eigene Modals (natives dialog nutzt stattdessen den Top Layer)
Benachrichtigungen, die über allem liegen müssen
Stacking-Labor mit 3D-Explosionsansicht
z-index des Headers
z-index der Karte (oder auto)
z-index des Dropdowns
z-index des Banners
Context-Auslöser an der Karte
Zusätzliche Eigenschaft an der Karte
3D-Explosionsansicht (Ebenen auseinanderdrehen)
Ebenen auseinandergezogen, höher bedeutet später gezeichnet
Flache Ansicht, echtes CSS
Header z {z}
Karte z {z}
Dropdown z {z}
Banner z {z}
(in der Karte)
über dem Banner
unter dem Banner
Die Karte bildet einen Stacking Context ({why}). Der Wert {d} des Dropdowns zählt nur innerhalb der Karte, daher liegt es {pos}, weil die Karte dort liegt.
Die Karte ist kein Stacking Context, also konkurriert das Dropdown direkt: {d} gegen {b} des Banners. Es liegt {pos}.
CSS für dieses Setup
CSS kopieren
Probier: Karte z auto, Dropdown 9999, dann transform wählen. Eine einzige Eigenschaft fängt das Dropdown ein.