Von Louis Lazaris SmashingMagazine

Die meisten CSS-Eigenschaften sind sehr einfach zu bewältigen. Oft Anwenden einer CSS-Eigenschaft auf ein Element im Markup wird haben sofortige Ergebnisse –, sobald Sie die Seite aktualisieren, die für die Eigenschaft festgelegten Wert wirksam wird, und Sie das Ergebnis sofort sehen. Anderen CSS-Eigenschaften, jedoch ein wenig komplexer werden und nur arbeiten im Rahmen einer bestimmten Konstellation von Bedingungen.

Die Z-index Eigenschaft gehört zu der letzteren Gruppe. Z-index hat zweifellos so viel Verwirrung und Frustration wie alle anderen CSS-Eigenschaft verursacht. Ironischerweise, jedoch, wenn Z-index ist vollständig, versteht es eine sehr einfache Eigenschaft verwendet werden, und bietet eine effektive Methode zur Überwindung viele Layout-Herausforderungen.

In diesem Artikel werden wir genau, was erklären Z-indexist, wie es missverstanden worden ist, und besprechen wir einige praktischen Verwendungsmöglichkeiten für es. Wir werden auch einige der Browser Unterschiede beschreiben, die auftreten können, besonders in früheren Versionen von Internet Explorer und Firefox. Diese umfassenden Blick auf Z-index sollten Entwickler eine ausgezeichnete Grundlage um diese Eigenschaft sicher und effektiv verwenden zu können bieten.

Was ist es?

Die Z-index -Eigenschaft bestimmt die Stack-Ebene der ein HTML-Element. "stack Level" verweist auf die Position des Elements auf derZ-Achse (im Gegensatz zu der x-Achse oder Y-Achse Achse). Eine höhere Z-index Wert bedeutet, dass das Element an den Anfang der Stapelreihenfolge näher sein wird. Diese Stapelreihenfolge wird senkrecht zur das Display oder Ansicht ausgeführt.

Weiterlesen →