Der Unterschied zwischen z-index: 0 und z-index: auto in CSS
|
Ich habe vor Kurzem etwas über Stapelkontexte gelernt. Während des Lernprozesses hatte ich Fragen zum Unterschied zwischen einem Z-Index von 0 und Auto, also ging ich zu Baidu, um einige Informationen nachzuschlagen. Ich habe einige Probleme festgestellt und diese Notiz auf der Grundlage meiner eigenen Praxis (Experimente?) zusammengestellt. ErrataAls ich nach Informationen suchte, stieß ich auf ein Sprichwort, das besagt, dass ein Z-Index von 0 einen neuen Stapelkontext erstellt und 0 über „Auto“ liegt. Die zweite Hälfte des Satzes ist falsch. Wenn z-index: 0 und z-index nicht gesetzt sind, also z-index: auto, gibt es in derselben Hierarchie keine Unterscheidung zwischen hoch und niedrig. Der Wert, der später im Dokumentfluss erscheint, überschreibt den Wert, der früher erscheint. Setzen Sie z-index: 0 oder z-index: auto, und die später im Dokumentfluss erscheinenden überdecken die früher erscheinenden.Lass uns ein paar Experimente machen
<!DOCTYPE html>
<html>
<Kopf>
<title>z-index ist 0 oder auto</title>
<Stil>
.Rot,
.Blau{
Breite: 200px;
Höhe: 200px;
}
.Rot {
Position: absolut;
Z-Index: 0;
oben: 100px;
links: 100px;
Hintergrund: #FF0000;
}
.Blau {
Position: absolut;
z-Index: automatisch;
oben: 40px;
links: 40px;
Hintergrund: #0000FF;
}
</Stil>
</Kopf>
<Text>
<div Klasse="rot">
Index-0
</div>
<div Klasse="blau">Index-Auto</div>
</body>
</html>Das Ergebnis dieses Codes ist:
Sie können sehen, dass das blaue Element das rote Element überdeckt. Die Reihenfolge der roten und blauen Elementblöcke im Dokument ist wie folgt vertauscht: <div Klasse="blau">Index-Auto</div> <div Klasse="rot"> Index-0 </div> Kann bekommen
Zu diesem Zeitpunkt deckt das rote Element das blaue Element wieder ab. Daraus lässt sich schließen, dass ein Z-Index-Wert von 0 oder „auto“ keinen Einfluss auf die Reihenfolge der Elemente im Stapelkontext hat. Wenn kein Z-Index angegeben ist, werden alle Elemente auf der Standardebene (Ebene 0) gerendert. Das heißt, Auto und 0 befinden sich auf derselben Ebene.
<div class="green">Z-Index nicht festlegen</div>
.Grün {
Position: absolut;
oben: 160px;
links: 160px;
Hintergrund: grüngelb;
}
Die Seite sieht jetzt so aus.
Für die grüne Farbe ist kein Z-Indexwert festgelegt. Wenn die Browserposition nicht statisch ist und der Z-Index nicht festgelegt ist, ist der Z-Index im Allgemeinen automatisch und in IE6/7 beträgt der Z-Index 0. z-index: 0 erstellt einen StapelkontextLassen Sie uns nun überprüfen, ob das rote Element aufgrund des Z-Index 0 über einen Stapelkontext verfügt. Testelemente im roten Element hinzufügen
<div Klasse="Test"></div>
.prüfen {
Breite: 140px;
Höhe: 140px;
Position: absolut;
rechts: 0px;
oben: 0px;
Hintergrund: grau;
Z-Index: 10;
}Zurzeit sieht die Seite so aus
Der graue Testblock wird von den blauen und grünen Blöcken abgedeckt. z-index: auto erstellt keinen StapelkontextWie wäre es also, dieses Testelement in den blauen Block zu legen und es auszuprobieren? (Der Z-Indexwert des blauen Elements ist auto)
Sie können sehen, dass das graue Element über allen Elementen angezeigt wird und der Z-Indexwert wirksam ist! Zu diesem Zeitpunkt gehört das Testelement zum Stapelkontext, der vom Stammelement erstellt wurde (in der Hierarchie der Stapelkontexte befinden sich Elemente, die keinen Stapelkontext erstellen, im selben Stapelkontext wie ihr übergeordnetes Element. Der blaue Block erstellt keinen Stapelkontext und befindet sich im selben Stapelkontext wie sein übergeordnetes Element, das Stammelement). Das rote Element gehört auch zum Stapelkontext, der vom Stammelement erstellt wurde, aber der Z-Index des roten Elements ist 0, also kleiner als 10, sodass der graue Block oben liegt. Zusammenfassen
Dies ist das Ende dieses Artikels über den Unterschied zwischen z-index: 0 und z-index: auto in CSS. Weitere Informationen zum Unterschied zwischen z-index: 0 und z-index: auto finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: Implementierung der Nginx-Konfiguration des lokalen Image-Servers
Artikel empfehlen
Ein Artikel, der Ihnen ein tiefes Verständnis von Mysql-Triggern vermittelt
Inhaltsverzeichnis 1. Wenn beim Einfügen oder Änd...
uniapp implementiert Datums- und Zeitauswahl
In diesem Artikelbeispiel wird der spezifische Co...
So stellen Sie Node.js mit Docker bereit
Vorwort Node wird als mittlere Schicht im Projekt...
Vue implementiert rekursiv ein dreistufiges Menü
In diesem Artikelbeispiel wird der spezifische Co...
Navicat kann keine Funktionslösungsfreigabe erstellen
Als ich zum ersten Mal eine MySQL-FUNKTION schrie...
Detaillierte Erklärung zur Verwendung von umask unter Linux
Ich habe vor Kurzem angefangen, Linux zu lernen. ...
Native JS-Kapselung vue Tab-Umschalteffekt
In diesem Artikelbeispiel wird der spezifische Co...
Lösen Sie das Problem, dass Docker Pull zurückgesetzt wird
In diesem Artikel wird beschrieben, wie Sie das P...
So ersetzen Sie alle Tags im HTML-Text
(?i) bedeutet, dass die Groß-/Kleinschreibung nich...
Analyse der Prinzipien der MySQL Slow Query-bezogenen Parameter
MySQL Slow Query, dessen vollständiger Name „Slow...
Interpretation und Analyse von HTTP-Header-Informationen (detaillierte Zusammenfassung)
HTTP-Header-Erklärung 1. Akzeptieren: Informiert d...
Informationen zur Installationsmethode für MySQL 8.0.13-ZIP-Pakete
MySQL 8.0.13 verfügt standardmäßig über einen Dat...
Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort
Inhaltsverzeichnis 1. Standort / Matching 2. Stan...
Geplantes Teilen von Skripten für MySQL-Datenbanksicherungen
BackUpMysql.sh-Skript #!/bin/bash PATH=/bin:/sbin...
Beispielcode für CSS, um horizontale Linien auf beiden Seiten des Textes zu erzielen
In diesem Artikel wird der CSS-Beispielcode vorge...