Der Z-Index-Inspektor zeigt die vollständige Stapelreihenfolge jedes Elements auf einer Webseite. Jedes Element mit einem Z-Index-Wert wird direkt auf der Seite hervorgehoben und beschriftet, und ein sortiertes Ebenen-Kartenfeld zeigt alle Z-Index-Ebenen von unten nach oben. Identifiziert Stacking-Kontexte, die durch position, transform, opacity und andere CSS-Eigenschaften erstellt wurden — Z-Index-Debugging endlich visuell und intuitiv.
Z-Index-Fehler gehören zu den frustrierendsten CSS-Problemen. Ein Modal, das über allem erscheinen sollte, wird hinter einer Seitenleiste versteckt. Ein Dropdown-Menü verschwindet hinter dem nächsten Abschnitt. Ein Tooltip ist unsichtbar, weil ein übergeordnetes Element einen unerwarteten Stacking-Kontext erstellt. Die Ursache ist fast immer ein Missverständnis darüber, wie Stacking-Kontexte funktionieren — und Browser-DevTools bieten kaum Hilfe bei der Visualisierung. Der Z-Index-Inspektor macht das Unsichtbare sichtbar. Jedes Element mit einem expliziten Z-Index erhält eine farbige Überlagerung und ein Label mit seinem Wert. Ein sortiertes Ebenen-Kartenfeld listet alle Z-Index-Werte von unten bis oben auf und zeigt, welche CSS-Klasse oder welches Element zu jedem Wert gehört. Am wichtigsten: Das Tool identifiziert Stacking-Kontext-Grenzen — Elemente, die neue Stacking-Kontexte über position + z-index, transform, opacity kleiner 1, filter, will-change oder isolation erstellen.
Jedes Element mit einem Z-Index-Wert erhält eine halbtransparente farbige Überlagerung und ein Label-Badge, das seine Z-Index-Zahl anzeigt. Höhere Z-Index-Werte erhalten wärmere Farben (Rottöne), niedrigere Werte kühlere Farben (Blautöne). Die visuelle Schichtung macht die Stapelreihenfolge sofort intuitiv.
Ein Seitenfeld listet alle auf der Seite gefundenen Z-Index-Werte auf, sortiert von höchstem bis niedrigstem. Jeder Eintrag zeigt den Z-Index-Wert, den CSS-Selektor oder Klassennamen und die Position-Eigenschaft. Klicken Sie auf einen Eintrag, um das entsprechende Element auf der Seite hervorzuheben.
Identifiziert jede Stacking-Kontext-Grenze auf der Seite und die CSS-Eigenschaft, die sie erstellt — position: relative/absolute mit z-index, transform, opacity kleiner 1, filter, will-change, isolation: isolate oder contain: layout. Diese werden separat aufgelistet, damit Sie nachverfolgen können, warum ein Z-Index-Wert sich nicht wie erwartet verhält.
Klicken Sie auf eine Ebene im Feld, um das entsprechende Element auf der Seite hervorzuheben und zu scrollen. Oder klicken Sie auf ein hervorgehobenes Element auf der Seite, um es im Ebenen-Kartenfeld zu lokalisieren. Navigieren Sie die Stapelreihenfolge in beliebiger Richtung.
Jeder Ebeneneintrag zeigt den CSS-Positionswert des Elements (static, relative, absolute, fixed, sticky), da z-index nur auf positionierte Elemente angewendet wird. Erkennen Sie Fälle, bei denen z-index gesetzt, aber position static ist — ein häufiger Fehler, bei dem z-index keine Wirkung hat.
Für ein ausgewähltes Element sehen Sie die vollständige Kette der übergeordneten Stacking-Kontexte bis zur Wurzel. Verstehen Sie genau, welcher Stacking-Kontext des Vorfahren den Z-Index-Bereich des Elements einschränkt — die entscheidende Erkenntnis für das Debuggen von Z-Index-Problemen.
Ein Modal mit z-index 9999 wird hinter einer Seitenleiste mit z-index 10 versteckt. Warum? Der Z-Index-Inspektor zeigt, dass das übergeordnete Element des Modals position: relative hat und einen Stacking-Kontext mit z-index 1 erstellt, während das übergeordnete Element der Seitenleiste z-index 2 hat. Das Modal kann seinen übergeordneten Kontext nie verlassen.
Ein Dropdown-Menü verschwindet beim Öffnen hinter dem nächsten Abschnitt. Der Inspektor zeigt, dass der Container des Menüs overflow: hidden hat (was ebenfalls einen Stacking-Kontext erstellt) oder dass der nächste Abschnitt einen höheren Z-Index hat. Die visuelle Ebenenhervorhebung macht die Überlappung offensichtlich.
Im Laufe der Zeit häufen sich Z-Index-Werte an: 10, 100, 999, 9999, 99999. Die Ebenenkarte zeigt alle Werte sortiert, sodass Sie den tatsächlich benötigten Bereich leicht identifizieren und auf eine übersichtliche Skala vereinfachen können.
Chat-Widgets, Cookie-Banner und Analytics-Overlays injizieren Elemente mit hohen Z-Index-Werten. Der Z-Index-Inspektor zeigt genau, welche Werte sie verwenden, und hilft Ihnen, Ihre eigenen Z-Index-Werte entsprechend zu setzen, um Konflikte zu vermeiden.
Überprüfen Sie alle Stacking-Kontexte auf der Seite auf unnötige. Transforms, Filter und Opacity für visuelle Effekte können unbeabsichtigt Stacking-Kontexte erstellen, die anderswo Z-Index-Probleme verursachen. Die Kontextliste macht sie alle sichtbar.
Öffnen Sie das DevSuite Pro Floating Dock und klicken Sie auf das Symbol des Z-Index-Inspektors. Das Tool scannt die Seite und identifiziert jedes Element mit einem Z-Index-Wert und jede Stacking-Kontext-Grenze.
Elemente mit Z-Index-Werten erhalten direkt auf der Seite farbige Überlagerungen mit Labels, die ihre Z-Index-Nummern anzeigen. Höhere Werte erscheinen in wärmeren Farben, niedrigere Werte in kühleren Farben.
Öffnen Sie das Seitenfeld, um alle Z-Index-Ebenen von höchstem bis niedrigstem sortiert anzuzeigen. Jeder Eintrag zeigt den Wert, Selektor und die Position-Eigenschaft. Klicken Sie auf einen Eintrag, um das Element auf der Seite hervorzuheben.
Der Abschnitt Stacking-Kontexte im Feld listet jedes Element auf, das einen neuen Stacking-Kontext erstellt, und die verantwortliche CSS-Eigenschaft. Dies ist meist der Schlüssel zum Verstehen von Z-Index-Problemen.
Klicken Sie auf ein Element, um seine übergeordnete Stacking-Kontext-Kette zu sehen — welche übergeordneten Kontexte seine Rendering-Reihenfolge beeinflussen. Folgen Sie der Kette aufwärts, um die Kontext-Grenze zu finden, die das Stacking-Problem verursacht.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
