Die meisten CSS-Eigenschaften sind einfach zu verwenden. Wenn Sie CSS-Eigenschaften für Elemente einer Auszeichnungssprache verwenden, werden die Ergebnisse oft sofort angezeigt, wenn Sie die Seite aktualisieren. Andere CSS-Eigenschaften sind komplexer und funktionieren nur unter bestimmten Umständen.
Das Z-Index-Attribut gehört zur letztgenannten oben genannten Gruppe. Der Z-Index sorgt zweifellos häufiger als jedes andere Attribut für Verwirrung (Kompatibilität) und Frustration (Entwicklerpsychologie). Aber das Lustige daran ist: Sobald Sie Z-Index wirklich verstanden haben, werden Sie feststellen, dass es sich um eine sehr einfach zu verwendende Eigenschaft handelt, die eine leistungsstarke Hilfe bei der Lösung vieler Layout-Herausforderungen bietet.
In diesem Artikel erklären wir genau, was Z-Index ist, warum er so wenig verstanden wird und diskutieren einige praktische Probleme im Zusammenhang mit seiner Verwendung. Wir beschreiben auch einige der Browser-zu-Browser-Unterschiede, auf die Sie stoßen werden. Hierbei handelt es sich um einzigartige Probleme, die in vorhandenen Versionen von IE und Firefox auftreten. Diese umfassende Perspektive auf das Z-Index-Attribut bietet Entwicklern eine gute Vertrauensbasis und leistungsstarke Hilfe bei der Verwendung des Z-Index-Attributs.
Was ist das?
Das Z-Index-Attribut bestimmt die Stapelebene eines HTML-Elements. Die Stapelebene eines Elements ist relativ zur Position des Elements auf der Z-Achse (im Gegensatz zur X- oder Y-Achse). Ein höherer Z-Index-Wert bedeutet, dass das Element in der Stapelreihenfolge näher an der Spitze liegt. Diese Schichtfolge wird entlang vertikaler Fadenachsen dargestellt.
Um ein klareres Bild der Funktionsweise von Z-Index zu vermitteln, ist im Bild oben die visuelle Positionierung gestapelter Elemente übertrieben dargestellt.
natürliche Schichtfolge
In einer HTML-Seite wird die natürliche Stapelreihenfolge (d. h. die Reihenfolge der Elemente auf der Z-Achse) von vielen Faktoren bestimmt. Die folgende Liste zeigt die Listenelemente in einem Stapelkontext (es wurde noch keine passende chinesische Übersetzung gefunden, sie sollte sich auf die Stapelumgebung beziehen, in der sich die gestapelten Elemente befinden). der Umwelt. Keinem der Elemente in dieser Liste wurde ein Z-Index-Attribut zugewiesen.
Der Hintergrund und der Rand des Elements erzeugen einen Stapelkontext
Zitat:
·Stapelkontextelemente mit negativen Werten werden in der Reihenfolge ihres Auftretens angeordnet (je später die Ebene, desto höher ist sie).
·Elemente auf Blockebene, die nicht positioniert oder schwebend sind, werden in der Reihenfolge ihres Erscheinens angeordnet.
·Nicht positionierte, schwebende Elemente werden in der Reihenfolge ihres Erscheinens angeordnet.
·Inline-Elemente werden in der Reihenfolge ihres Erscheinens angeordnet.
·Die positionierten Elemente werden in der Reihenfolge ihres Erscheinens angeordnet.
Die Z-Index-Eigenschaft ändert bei korrekter Verwendung die natürliche Stapelreihenfolge.
Natürlich ist die Stapelreihenfolge der Elemente nicht besonders offensichtlich, es sei denn, sie wurden so positioniert, dass sie einander überlappen. Unten ist eine BOX mit negativen Rändern dargestellt, um die natürliche Stapelreihenfolge zu veranschaulichen.
Die obige BOX ist mit unterschiedlichen Hintergrund- und Randfarben definiert, und die beiden letzteren sind versetzt und definieren einen negativen oberen Rand, sodass wir die natürliche Stapelreihenfolge sehen können. Die graue BOX steht an erster Stelle in der Markierung, die blaue BOX an zweiter Stelle und die goldene BOX an dritter Stelle. Die angewendeten negativen Ränder weisen deutlich darauf hin, dass für diese Elemente keine Z-Index-Eigenschaft festgelegt ist; ihre Stapelreihenfolge ist natürlich oder die standardmäßige zusammengesetzte Regel. Das Phänomen des Interlacing wird durch negative Ränder verursacht.