Für welche Elemente ist z-index relevant?
Die MDN-Dokumentation zu z-index beschreibt die Anwendung unter anderem auf positionierte Elemente sowie Flex- und Grid-Elemente. Die Zahl steht dabei nicht unabhängig von der übrigen Seitenstruktur.
Beispielsweise kann ein geöffneter Menübereich vor dem Seiteninhalt liegen. Auch ein Dialog und sein Hintergrund benötigen eine nachvollziehbare Ebenenordnung.
Bei einer individuellen Website sollte diese Ordnung zur Funktion passen. Ein sichtbares Formular muss weiterhin bedienbar sein und darf nicht versehentlich von einer anderen Ebene verdeckt werden.
Warum funktioniert ein hoher Wert manchmal nicht?
Ein Stapelkontext bildet eine eigene Gruppe von Ebenen. Werte innerhalb dieser Gruppe werden zunächst untereinander eingeordnet.
Die MDN-Erklärung zu Stapelkontexten zeigt, dass solche Gruppen unabhängig voneinander behandelt werden. Ein Kind mit einem sehr hohen Wert kann deshalb nicht beliebig über ein Element in einem übergeordneten anderen Kontext springen.
Ein hypothetisches Beispiel: Ein Menü liegt innerhalb eines Seitenbereichs, der hinter einem anderen Bereich eingeordnet ist. Ein höherer Menüwert allein löst die Situation möglicherweise nicht.
Dann muss geprüft werden, welcher Vorfahr den Stapelkontext bildet und wie dieser insgesamt eingeordnet ist. Unter anderem können bestimmte Positionierungen, Transformationen oder Transparenzeinstellungen neue Kontexte erzeugen.
Wie gehst du bei Darstellungsproblemen vor?
Untersuche zuerst die tatsächliche Elementstruktur. Welche Ebene verdeckt welche andere? Gehören beide zum selben Stapelkontext?
Bei einer WordPress-Website können Theme und zusätzliche Komponenten unterschiedliche Ebenenregeln mitbringen. Eine pauschale extrem hohe Zahl kann kurzfristig helfen und später andere Funktionen verdecken.
Verwende deshalb eine nachvollziehbare Ordnung für normale Inhalte, Navigation, Hinweise und Dialoge. Prüfe anschließend die relevanten Zustände auf verschiedenen Bildschirmgrößen.
Berücksichtige auch Fokus und Bedienung: Ein korrekt sichtbarer Dialog benötigt weiterhin eine verständliche Tastaturführung.
z-index ist damit ein gezieltes Werkzeug für die Darstellung. Die robuste Lösung entsteht aus dem Verständnis der Ebenenstruktur und dem Zweck der betroffenen Oberfläche.
