Verstehen des 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 Darstellungsfluss, und alle Elemente sind sich des Platzes bewusst, den andere einnehmen. Mit dem z-index-Attribut können Sie die Anordnung der Schichtung von Objekten beim Rendern von Inhalten anpassen.

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 Boxen sich visuell überlappen.

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

Dies bedeutet, dass CSS-Stilregeln es Ihnen ermöglichen, Boxen auf Schichten zusätzlich zur Standard-Darstellungsschicht (Schicht 0) zu positionieren. Die Position auf einer imaginären z-Achse jeder Schicht wird als ganzzahliger Wert ausgedrückt, der die Stapelreihenfolge für das Rendern darstellt. Größere Zahlen bedeuten näher beim 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 eine einzelne ganze Zahl mit einem leicht verständlichen Verhalten zugewiesen bekommt. Wenn z-index auf komplexe Hierarchien von HTML-Elementen angewendet wird, kann sein Verhalten jedoch schwer zu verstehen oder vorherzusagen sein. Dies liegt an komplexen Stapelregeln. Tatsächlich wurde in der CSS-Spezifikation CSS-2.1 Anhang E ein eigener Abschnitt dafür reserviert, um diese Regeln besser zu erklären.

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