CSS z-index verstehen

Original Dokumenteninformation

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 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.

  1. Stapeln ohne die Eigenschaft z-index: Die Stapelungsregeln, die gelten, wenn z-index nicht verwendet wird.
  2. Stapeln mit schwebenden Blöcken: Wie schwebende Elemente beim Stapeln behandelt werden.
  3. Verwenden von z-index: Wie Sie z-index verwenden, um die Standardstapelung zu ändern.
  4. Der Stapelungskontext: Hinweise zum Stacking-Kontext.
  5. Stapelungskontext-Beispiel 1: 2-stufige HTML-Hierarchie, z-index auf der letzten Stufe
  6. Stapelungskontext-Beispiel 2: 2-stufige HTML-Hierarchie, z-index auf allen Ebenen
  7. Stapelungskontext-Beispiel 3: 3-stufige HTML-Hierarchie, z-index auf der zweiten Ebene
  • Autor(s): Paolo Lombardi
  • Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für YappY. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der Creative Commons: Attribution-Sharealike license zu teilen.
  • Letzte Aktualisation: 9. Juli 2005

Anmerkung des Autors: Danke an Wladimir Palant und Rod Whiteley für die Rezension.