In den meisten einfachen 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 der Prozess kennt den Platz, den jedes Elemente einimmt. Mit dem Attribut {{cssxref("z-index")}} können Sie die Reihenfolge der Schichtung von Objekten beim Rendern von Inhalten verändern.
In CSS 2.1 hat jede Box eine Position in drei Dimensionen. Zusätzlich zu ihrer horizontalen und vertikalen Position liegen die Boxen entlang einer "Z-Achse" und werden übereinander formatiert. Die Positionen der Z-Achse sind besonders relevant, wenn sich Boxen visuell überlappen.
(von CSS 2.1 Section 9.9.1 - Layered presentation)
Das bedeutet, dass Sie mit CSS-Stilregeln Boxen auf Ebenen zusätzlich zur normalen Rendering-Ebene (Ebene 0) positionieren können. Die Z-Position jeder Ebene wird als Ganzzahl ausgedrückt, die die Stapelreihenfolge für das Rendering darstellt. Größere Zahlen bedeuten näher am Betrachter. Die Z-Position kann mit der CSS-Eigenschaft z-index gesteuert werden
Die Verwendung von z-index erscheint extrem einfach: eine einzelne Eigenschaft, der eine einzelne Ganzzahl zugewiesen ist, mit einem leicht verständlichen Verhalten. Wenn z-index jedoch auf komplexe Hierarchien von HTML-Elementen angewendet wird, kann sein Verhalten schwer zu verstehen oder vorherzusagen sein. Das liegt an den komplexen Stapelungsregeln. In der Tat wurde in der CSS-Spezifikation CSS-2.1 Anhang E ein eigener Abschnitt reserviert, um diese Regeln besser zu erklären.
Dieser Artikel wird versuchen, diese Regeln zu erklären, mit einigen Vereinfachungen und mehreren Beispielen.
z-index nicht verwendet wird.z-index verwenden, um die Standardstapelung zu ändern.z-index auf der letzten Stufez-index auf allen Ebenenz-index auf der zweiten EbeneAnmerkung des Autors: Danke an Wladimir Palant und Rod Whiteley für die Rezension.