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
Implementierungs- und Nutzungsszenarien der JS-Anti-Shake-Drosselungsfunktion
Inhaltsverzeichnis 1. Was ist die Anti-Shake-Funk...
Detaillierte Erklärung zur Begrenzung des Update-/Löschbereichs mit dem MySQL-Parameter sql_safe_updates
Vorwort Wie Sie alle wissen, sind wir bei MySQL-B...
Detaillierte Beschreibung der Funktion von meta name="" content="
1. Grammatik: <meta name="Name" conte...
Zusammenfassung der Wissenspunkte zur Synchronisierung und zum gegenseitigen Ausschluss zwischen Linux-Threads
Wenn Threads gleichzeitig ausgeführt werden, müss...
Verlustfreie Erweiterungsmethode unter Linux
Überblick Der Server des Cloud-Plattform-Kunden k...
Detaillierte Erklärung der Whitelist-Regeln von nginx-naxsi
Syntax der Whitelist-Regel: Grundregel wl:ID [neg...
Muss MySql ein Commit durchführen?
Ob MySQL bei der Ausführung von Vorgängen wie Ein...
Optimierung der MySQL 4G-Speicherserverkonfiguration
Da die Anzahl der Besuche auf der Website des Unt...
Spezifische Methode zum Löschen des MySQL-Dienstes
MySQL meldet den folgenden Fehler Ich ging zu „Sy...
Vergleich der Effizienz zwischen Einzeltabellenabfrage und Mehrtabellen-Joinabfrage in der MySql-Datenbank
Während dieser Zeit stieß ich bei der Arbeit an e...
Lösungen für den Fehler und die Ungültigkeit beim Öffnen von nginx.pid
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Tutorial zur Verwendung des Frameset-Tags in HTML
Frameset-Seiten unterscheiden sich etwas von norm...
Lösen Sie das Installationsproblem von Linux Tensorflow2.0
conda aktualisieren conda pip installieren tf-nig...
Welche Vorteile bietet die Verwendung eines B+-Baums als Indexstruktur in MySQL?
Vorwort In MySQL verwenden sowohl Innodb als auch...
js genaue Berechnung
var numA = 0,1; var numB = 0,2; Alarm (Zahl A + Z...