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 sind, ohne sich zu überlappen. In diesem Fall gibt es einen einzigen Rendering-Fluss, und alle Elemente sind sich des von anderen eingenommenen Platzes 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. Neben ihrer horizontalen und vertikalen Position befinden sich Boxen entlang einer "z-Achse" und werden übereinander formatiert. Z-Achsen-Positionen sind besonders relevant, wenn Boxen sich visuell überlappen.

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

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

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

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