Verständnis von z-index

In den einfachsten Fällen können HTML-Seiten als zweidimensional betrachtet werden, da Text, Bilder und andere Elemente auf der Seite angeordnet werden, ohne sich zu überlappen. In diesem Fall gibt es einen einzigen Renderingfluss, und alle Elemente sind sich des von anderen eingenommenen Raums bewusst. Das z-index-Attribut ermöglicht es Ihnen, die Reihenfolge der Schichtung von Objekten beim Rendern von Inhalten anzupassen.

In CSS 2.1 hat jede Box eine Position in drei Dimensionen. Zusätzlich zu ihren horizontalen und vertikalen Positionen liegen Boxen entlang einer "z-Achse" und werden übereinander formatiert. Z-Achsen-Positionen sind besonders relevant, wenn sich Boxen visuell überlappen.

(aus CSS 2.1 Abschnitt 9.9.1 - Geschichtete Präsentation)

Das bedeutet, dass CSS-Stilregeln es ermöglichen, Boxen zusätzlich zur Standard-Rendering-Ebene (Ebene 0) in Schichten zu positionieren. Die Position auf einer imaginären z-Achse jeder Schicht wird als ganze Zahl ausgedrückt, die die Stapelreihenfolge für das Rendering angibt. Größere Zahlen bedeuten näher am Betrachter. Die Position auf dieser z-Achse steuern Sie mit der CSS-Eigenschaft z-index.

Die Verwendung von z-index erscheint äußerst einfach: eine einzige Eigenschaft, die einer einzigen ganzen Zahl mit einem leicht verständlichen Verhalten zugewiesen wird. Wenn z-index jedoch auf komplexe Hierarchien von HTML-Elementen angewendet wird, kann sein Verhalten schwer zu verstehen oder vorherzusagen sein. Dies liegt an komplexen Stapelregeln. Tatsächlich wurde in der CSS-Spezifikation eigens ein Abschnitt reserviert CSS-2.1 Anhang E, um diese Regeln besser zu erklären.

Dieser Leitfaden wird versuchen, diese Regeln zu erklären, mit einigen Vereinfachungen und mehreren Beispielen.