Weil wir intuitiv denken, dass HTML-Webseiten zweidimensional sind, weil Text, Bilder oder andere Elemente in der richtigen Reihenfolge angeordnet sind. Die tatsächliche Webseite ist jedoch dreidimensional und es kann zu einer Stapelung (Überlappung) zwischen Elementen kommen über CSS legt die Z-Index-Eigenschaft die Stapelreihenfolge der Elemente fest.
1. Die Bedeutung des Z-Index-Attributs
Die Stapelreihenfolge eines Elements im Dokument, die zur Bestätigung der Stapelebene des Elements im aktuellen Stapelkontext verwendet wird. Elemente mit einer höheren Stapelreihenfolge erscheinen immer vor Elementen mit einer niedrigeren Stapelreihenfolge.
(1) Je höher der Z-Index-Attributwert, desto höher ist er.
(2) Elemente können negative Z-Index-Attributwerte haben.
(3) Z-Index und spezifische Zahlen.
(4) Der Wert des Z-Index folgt nicht der Einheit.
Wie unten gezeigt:
Wie in der Abbildung oben gezeigt, leitet sich der Name dieser Eigenschaft vom Koordinatensystem ab, wobei die x-Achse von links nach rechts und die y-Achse von oben nach unten verläuft. Vom Bildschirm zum Benutzer verläuft die Z-Achse. In diesem Koordinatensystem sind Elemente mit einem höheren Z-Index-Wert näher am Benutzer als Elemente mit einem niedrigeren Z-Index-Wert. Das heißt, Elemente mit einem höheren Z-Index-Wert werden zuerst im Sichtfeld des Benutzers angezeigt , was dazu führt, dass Elemente mit hohen Z-Index-Werten andere Elemente länger überdecken, was auch als Stapeln oder Stapeln bezeichnet wird.
Mit dem Z-Index-Attribut können Sie komplexere Webseitenlayouts erstellen. Die optionalen Werte des Z-Index-Attributs sind in der folgenden Tabelle aufgeführt:
Bezüglich der hierarchischen Beziehung von Elementen sind folgende Punkte zu beachten:
(1) Bei Elementen, deren Positionsattribut nicht festgelegt ist oder wenn der Wert des Positionsattributs statisch ist, überschreibt das später definierte Element das vorherige Element.
(2) Bei Elementen, für die ein Positionsattribut festgelegt ist und deren Attributwert nicht statisch ist, überschreiben diese Elemente Elemente, für die kein Positionsattribut festgelegt ist oder deren Positionsattributwert statisch ist.
(3) Bei Elementen, deren Positionsattributwert nicht statisch ist und für die ein Z-Index-Attribut definiert ist, überschreiben Elemente mit einem größeren Z-Index-Attributwert Elemente mit einem kleineren Z-Index-Attributwert, d. h. je größer der Z-Wert ist -Index-Attributwert, desto höher ist die Priorität. Wenn die Z-Index-Attributwerte gleich sind, überschreiben die später definierten Elemente die zuvor definierten Elemente.
(4) Das Z-Index-Attribut ist nur wirksam, wenn das Element das Positionsattribut definiert und der Attributwert nicht statisch ist.
2.Z-Index-Anwendungsfall
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>CSSz-index</title><styletype=text/css>div{width:200px;height:200px;text-align:center; Schriftgröße:50px;Zeilenhöhe: 200px;position:absolute;}#red{left:100px;top:100px;}#green{left:200px;top:200px;}</style></head><body><!--Z-Index-Kaskadierung Sexuelle Prinzipien: 1. Elemente auf derselben Ebene (oder Position: statisch) überschreiben standardmäßig die vorherigen Elemente im Dokumentenfluss. (Kommt von hinten) 2. Wenn bei Elementen derselben Ebene die Position nicht statisch ist und ein Z-Index vorhanden ist, überdeckt das Element mit einem größeren Z-Index das Element mit einem kleineren Z-Index, also dem größeren Je höher der Z-Index, desto höher die Priorität. --><divid=redstyle=background:red;z-index:0;>A</div><divid=greenstyle=background-color:green;>B</div><divid=bluestyle=background-color: blue;z-index:-1;>C</div></body></html>Laufergebnisse:
Einige Missverständnisse über Z-Index
Im Allgemeinen können wir sagen, dass das Z-Index-Attribut nur bei Verwendung mit positionierten Elementen (Elementen, deren Position nicht statisch ist) funktioniert. Zunächst einmal ist diese Aussage falsch, da in CSS3 auch die untergeordneten Elemente der Flexbox verwendet werden können . Legen Sie das Z-Index-Attribut fest.