Detaillierte Erklärung wichtiger Kaskadierungskonzepte in CSS

Detaillierte Erklärung wichtiger Kaskadierungskonzepte in CSS

Kürzlich stieß ich im Verlauf des Projekts auf ein Problem. Ich möchte, dass die Menüleiste immer oben angezeigt wird und die nachfolgenden Elemente darunter. Zu diesem Zeitpunkt funktionierte das Festlegen des Z-Index nicht. Ich weiß nicht, warum, also suchte ich nach Informationen zum CSS-Stacking und löste das Problem. Hier ist ein Eintrag~

Der Bildschirm ist eine zweidimensionale Ebene, aber HTML-Elemente sind in einem dreidimensionalen Koordinatensystem angeordnet, wobei x die horizontale Position, y die vertikale Position und z die Position von innen nach außen auf dem Bildschirm ist. Wenn wir auf den Bildschirm schauen, blicken wir entlang der z-Achse von außen nach innen. Daher bilden die Elemente aus der Sicht des Benutzers eine Stapelbeziehung. Ein Element kann andere Elemente überdecken oder von anderen Elementen überdeckt werden.

Hier sind einige wichtige Konzepte: Stapelkontext (Stacking Context), Stapelebene (Stacking Level), Stapelreihenfolge (Stacking Order), Z-Index

Stellungnahme:

  • Die folgenden Positionierungselemente beziehen sich auf position:absolute|fixed|relative|sticky
  • Die folgenden nicht positionierten Elemente beziehen sich auf position:initial|static
  • Es gibt ein ähnliches Konzept zum Stapeln von Kontext: Block Formatting Context (BFC). Sie können auf den wichtigen BFC in CSS verweisen, der auch einige Inhalte des Dokumentflusses einführt.
  • Dieser Artikel ist ziemlich lang, aber wenn Sie den Mut haben, ihn zu lesen, sollten Sie ein grundlegendes Verständnis der Konzepte im Zusammenhang mit dem Stapeln haben (～o￣▽￣)～

1. Stapelkontext

Stapelkontext ist ein dreidimensionales Konzept in HTML. In der CSS2.1-Spezifikation ist die Position jedes Elements dreidimensional. Wenn Elemente gestapelt werden, können sie andere Elemente überdecken oder von anderen Elementen überdeckt werden. Je höher die Position auf der Z-Achse, desto näher ist sie am Bildschirmbeobachter.

Der Artikel <Dinge, die Sie nicht über den Z-Index wussten> enthält eine gute Analogie, die ich hier zitieren möchte:

Stellen Sie sich einen Tisch vor, auf dem sich eine Reihe von Gegenständen befinden. Dieser Tisch stellt einen Stapelkontext dar. Wenn sich neben der ersten Tabelle eine zweite Tabelle befindet, stellt diese zweite Tabelle einen anderen Stapelkontext dar.

Stellen Sie sich nun vor, dass sich auf dem ersten Tisch vier kleine Würfel befinden und diese alle direkt auf dem Tisch platziert sind. Auf diesen vier kleinen Quadraten liegt ein Stück Glas und auf dem Glas ein Teller mit Obst. Diese Blöcke, Glasstücke und Obstteller stellen jeweils eine andere Stapelebene im Stapelkontext, dem Tisch, dar.

Jede Webseite hat einen Standard-Stapelkontext. Die Wurzel dieses Stapelkontexts (der Tabelle) ist <html></html> . In diesem Standard-Stapelkontext wird alles innerhalb des HTML-Tags auf einer Stapelebene platziert (die Elemente werden in der Tabelle platziert).

Wenn Sie einem positionierten Element einen anderen Z-Index-Wert als auto zuweisen, erstellen Sie einen neuen Stapelkontext mit eigenen Stapelebenen, die unabhängig von anderen Stapelkontexten und Stapelebenen auf der Seite sind. Es ist, als würden Sie einen weiteren Tisch in den Raum bringen.

Stapelkontext 1 wird durch das Dokumentstammelement gebildet. Stapelkontext 2 und 3 sind Stapelebenen auf Stapelkontext 1. Außerdem bilden sie jeweils einen neuen Stapelkontext, der neue Stapelebenen enthält.

Innerhalb eines Stapelkontexts werden die untergeordneten Elemente entsprechend den oben erläuterten Regeln gestapelt. Die Methoden zum Bilden eines Stapelkontexts sind:

  • Stammelement <html></html>
  • position Positionswert ist absolute|relative und z-index ist nicht auto
  • position ist fixed|sticky
  • Flex-Element, dessen z-index -Wert nicht auto ist, d. h. das übergeordnete Element display:flex|inline-flex
  • Elemente mit einem opacity kleiner als 1
  • Elemente, deren transform Attributwert nicht none ist
  • Elemente, deren Attributwert mix-blend-mode nicht normal ist
  • Elemente, deren Werte von filter , perspective , clip-path , mask , mask-image , mask-border und motion-path nicht none sind.
  • Elemente mit perspective anderen Perspektivenwert als none
  • Elemente, deren isolation auf isolate gesetzt ist
  • will-change gibt alle CSS-Eigenschaften an, auch wenn Sie für diese Eigenschaften keine Werte direkt angeben
  • - Die Eigenschaft -webkit-overflow-scrolling ist auf touch -Element“ eingestellt

Zusammenfassen:

Stapelkontexte können in anderen Stapelkontexten enthalten sein und bilden zusammen eine Hierarchie von Stapelkontexten.

Jeder Stapelkontext ist vollständig unabhängig von seinen Geschwisterelementen. Beim Stapeln werden nur untergeordnete Elemente berücksichtigt. Dies ähnelt BFC.

Jeder Stapelkontext ist in sich geschlossen: Wenn der Inhalt eines Elements gestapelt wird, wird das gesamte Element der Reihe nach innerhalb des übergeordneten Stapelkontexts gestapelt.

2. Stapelebene

Die Stapelebene bestimmt das Konzept der Anzeigereihenfolge von Elementen auf der Z-Achse im gleichen Stapelkontext;

  • Die Stapelebene eines normalen Elements wird durch seinen Stapelkontext bestimmt.
  • Ein Vergleich der Stapelebenen ist nur innerhalb des gleichen Stapelkontexts sinnvoll.
  • Im gleichen Stapelkontext definiert die Stapelebenenbeschreibung die Auf- und Ab-Reihenfolge der Elemente im Stapelkontext auf der Z-Achse.

Beachten Sie, dass die Stapelebene nicht unbedingt durch den Z-Index bestimmt wird. Nur die Stapelebene positionierter Elemente wird durch den Z-Index bestimmt. Die Stapelebene anderer Elementtypen wird durch die Stapelreihenfolge, die Reihenfolge, in der sie im HTML erscheinen, und die Stapelebene der Elemente über ihrem übergeordneten Element bestimmt. Detaillierte Regeln finden Sie in der Einführung zur Stapelreihenfolge weiter unten.

3. Z-Index

In CSS 2.1 befinden sich alle Elemente des Boxmodells in einem dreidimensionalen Koordinatensystem. Zusätzlich zu den allgemein verwendeten horizontalen und vertikalen Achsen können Boxmodellelemente auch entlang der „Z-Achse“ gestapelt werden. Wenn sie sich überlappen, wird die Reihenfolge der Z-Achse sehr wichtig.

- CSS 2.1 Abschnitt 9.9.1 - Mehrschichtige Darstellung

Der Z-Index gilt nur für positionierte Elemente und ist für nicht positionierte Elemente ungültig. Er kann auf eine positive Ganzzahl, eine negative Ganzzahl, 0 oder „auto“ gesetzt werden. Wenn für ein positioniertes Element kein Z-Index gesetzt ist, ist der Standardwert „auto“.

Der Z-Indexwert eines Elements ist nur innerhalb desselben Stapelkontexts von Bedeutung. Wenn die Stapelebene eines übergeordneten Stapelkontexts niedriger ist als die eines anderen Stapelkontexts, hat das Festlegen eines höheren Z-Index keine Auswirkungen. Wenn Sie also auf eine Situation stoßen, in der ein großer Z-Index-Wert nicht funktioniert, überprüfen Sie, ob der übergeordnete Stapelkontext durch andere Stapelkontexte abgedeckt ist.

4. Stapelreihenfolge

Die Stapelreihenfolge (Stapelreihenfolge, Stapelreihenfolge, Stapelreihenfolge) beschreibt die Reihenfolge der Elemente im gleichen Stapelkontext. Beginnend vom unteren Ende des Stapels gibt es sieben Stapelreihenfolgen:

  • Hintergründe und Ränder: Der Hintergrund und die Ränder des Elements, das den Stapelkontext bildet.
  • Negativer Z-Indexwert: Positionieren Sie untergeordnete Elemente mit negativen Z-Indexwerten innerhalb des Stapelkontexts. Je größer der negative Wert, desto niedriger die Stapelebene.
  • Box auf Blockebene: ein nicht positioniertes untergeordnetes Element auf Blockebene im Dokumentfluss.
  • Schwebende Box: nicht positioniertes schwebendes Element;
  • Inline-Box: Inline-, nicht positionierte untergeordnete Elemente im Dokumentfluss;
  • z-index: 0: Positionierte Elemente mit einem Z-Index von 0 oder auto. Diese Elemente bilden einen neuen Stapelkontext.
  • Positiver Z-Indexwert: Ein positioniertes Element mit einem positiven Z-Index. Je größer der positive Wert, desto höher die Stapelebene.

Elemente in der gleichen Stapelreihenfolge werden in der Reihenfolge gestapelt, in der sie im HTML erscheinen. Ein Element auf Ebene 7 wird über den Elementen davor angezeigt und scheint die Elemente der niedrigeren Ebenen zu überdecken:

5. Tatsächlicher Kampf

5.1 Allgemeine Situation

Die drei relative positionierten div Blöcke haben jeweils span.red , span.green und span.blue in unterschiedlichen absolute Farben, bei allen ist position:absolute .

Siehe Codepen - Normalfall

Wenn also kein Element über eine Z-Index-Eigenschaft verfügt, werden die Elemente in diesem Beispiel in der folgenden Reihenfolge gestapelt (von unten nach oben):

  • Hintergrund und Rahmen des Stammelements
  • Nicht positionierte Elemente auf Blockebene werden in der Reihenfolge gestapelt, in der sie im HTML erscheinen.
  • Inline-Elemente ohne Position werden in der Reihenfolge gestapelt, in der sie im HTML erscheinen.
  • Positionierte Elemente werden in der Reihenfolge gestapelt, in der sie in HTML erscheinen.

Rot, Grün und Blau sind alle positionierte Elemente mit Z-Index-Auto. Gemäß der 7-Ebenen-Stapelreihenfolgeregel gehören sie alle zur 6. Ebene der Stapelreihenfolge und werden daher in der Reihenfolge ihres Auftretens in HTML gestapelt:紅->綠->藍

5.2 Im gleichen Stapelkontext übergeordnetes Element

Rot und Grün liegen unter einer div.first-box und Blau unter div.second-box . position:absolute ist für Rot, Grün und Blau eingestellt, und position:relative ist für first-box und second-box eingestellt.

Siehe Codepen – Verschiedene übergeordnete Elemente, aber beide unter dem Stammelement

In diesem Beispiel erzeugen die übergeordneten Elemente first-box und second-box der Elemente red, blue und green keinen neuen Stapelkontext. Sie sind beide Elemente im Stammstapelkontext und befinden sich beide auf Ebene 6 in der Stapelreihenfolge. Daher werden sie in der Reihenfolge ihres Auftretens in HTML gestapelt:紅->綠->藍

5.3 Z-Index zu untergeordneten Elementen hinzufügen

Rot und Grün liegen unter einer div.first-box , Blau und Gelb unter div.second-box , und für Rot, Grün und Blau ist position:absolute gesetzt. Wenn zu Grün ein z-index:1 hinzugefügt wird, steht .green ganz oben;

Wenn Sie nach .green unter .second-box ein absolut positioniertes span.gold hinzufügen und z-index:-1 festlegen, befindet es sich unter Rot, Grün und Blau.

Siehe Codepen – Festlegen des Z-Index

In diesem Beispiel wird im übergeordneten Element der roten, blauen, grünen und gelben Elemente kein neuer Stapelkontext generiert. Sie gehören alle zu den Elementen im Stammstapelkontext.

Für Rot und Blau ist kein Z-Index festgelegt, und beide gehören zur Ebene 6 in der Stapelreihenfolge, stapelbar in der Reihenfolge ihres Auftretens im HTML.

  1. Grün hat einen positiven Z-Index und liegt auf Stufe 7.
  2. Gelb hat einen negativen Z-Index und gehört zur Ebene 2;

Die Reihenfolge von unten nach oben lautet in diesem Beispiel also:黃->紅->藍->綠

5.4 In übergeordneten Elementen mit unterschiedlichen Stapelkontexten

Rot und Grün liegen unter einer div.first-box und Blau unter div.second-box . position:absolute ist für Rot, Grün und Blau eingestellt. Wenn der Z-Index von first-box größer als der von second-box eingestellt ist, liegt Blau immer unter Rot und Grün, unabhängig davon, wie groß der Z-Index von Blau ist z-index:999 ). Wenn wir nur den Z-Index von Rot und Grün ändern, steht das Element mit dem größeren Z-Index oben, da sich beide Elemente im Stapelkontext befinden, der vom übergeordneten Element first-box generiert wird.

Siehe Codepen - Eltern verschiedener Stapelkontexte

In diesem Beispiel sind Rot, Grün und Blau alle positionierte Elemente mit festgelegtem Z-Index, aber ihr übergeordnetes Element erstellt einen neuen Stapelkontext.

  1. Das rote und grüne übergeordnete Element first-box ist ein positioniertes Element mit einem positiven Z-Index, wodurch ein Stapelkontext erstellt wird, der sich in der Stapelreihenfolge auf Ebene 7 befindet.
  2. Das blaue übergeordnete Element second-box erstellt ebenfalls einen Stapelkontext und gehört in der Stapelreihenfolge zur Ebene 6.
  3. Gemäß der Stapelreihenfolge werden alle Elemente first-box in second-box platziert.
  4. Rot und Grün gehören beide zum Stapelkontext first-box und haben unterschiedliche positive Z-Indizes festgelegt. Beide gehören zur Ebene 7 in der Stapelreihenfolge.
  5. Das blaue Element gehört zum Stapelkontext second-box und verfügt über einen großen positiven Z-Index, wodurch es sich im Stapelkontext auf Ebene 7 befindet.
  6. Obwohl der Z-Index von Blau groß ist, liegt es unterhalb von Rot und Grün, da die Stapelebene der second-box kleiner ist als die first-box .

In diesem Beispiel ist die Reihenfolge von niedrig nach hoch:藍->紅->綠

(Die Situation, die ich vorgefunden habe, ähnelt diesem Beispiel)

5.5 Opazität für untergeordnete Elemente festlegen

Rot und Grün liegen unter div.first-box , Blau liegt unter div.second-box , position:absolute ist für Rot, Grün und Blau gesetzt und z-index:1 ist für Grün gesetzt, also liegt Grün über Rot und Blau;

Wenn Sie für first-box opacity:.99 festlegen, liegt Blau immer über Rot und Grün, unabhängig davon, wie hoch der Z-Index von Rot und Grün ist z-index:999 ).

Wenn Sie nach .green unter .second-box ein span.gold hinzufügen und z-index:-1 festlegen, befindet es sich unter Rot, Grün und Blau.

Siehe Codepen - Wirkung der Opazität

Wie bereits erwähnt, kann das Festlegen opacity auch einen Stapelkontext bilden, also:

  1. opacity first-box wird festgelegt first-box wird zu einem neuen Stapelkontext.
  2. second-box bildet keinen neuen Stapelkontext, daher gehören alle darin enthaltenen Elemente zum Stammstapelkontext.
  3. Gelb gehört zur Ebene 2 in der Stapelreihenfolge, Rot und Grün gehören zur Ebene 7, first-box gehört zur Ebene 6 und Blau gehört zur Ebene 6 in der Stapelreihenfolge und liegt in der HTML-Darstellungsreihenfolge über first-box .

In diesem Beispiel lautet die Reihenfolge von niedrig nach hoch:黃->紅->綠->藍

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Wachstumserfahrung eines Webdesigners

>>:  Eine kurze Diskussion über die richtige Haltung der Tomcat-Speicherkonfiguration

Artikel empfehlen

Tutorial zur Installation von MySQL 5.7.18 unter Windows 10

In diesem Tutorial erfahren Sie alles über die In...

Eine kurze Erläuterung zum Ändern/Festlegen der Umgebungsvariable JAVA_HOME unter Linux

1. Dauerhafte Änderung, gültig für alle Benutzer ...

js fügt dynamisch Beispielcode für eine Liste eingekreister Zahlen hinzu

1. Fügen Sie zuerst das ul-Tag im Textkörper hinz...

Vue3 kapselt die Lupeneffektkomponente der Jingdong-Produktdetailseite

In diesem Artikel wird der spezifische Code der V...

6 Lösungen für Netzwerkfehler im Docker-Container

6 Lösungen für Netzwerkfehler im Docker-Container...

Bei der Installation von Docker Desktop wird eine Fehlermeldung angezeigt: Die WSL 2-Installation ist unvollständig (Beheben Sie die Fehlermeldung).

Fehlerbeschreibung Wenn wir Docker Desktop instal...

Verwenden Sie MySQL, um die von der URL zurückgegebenen HTTP-GET-Anforderungsdaten aufzuzeichnen

Geschäftsszenarioanforderungen und Implementierun...

Detaillierte Erklärung der sieben Datentypen in JavaScript

Inhaltsverzeichnis Vorwort: Detaillierte Einführu...

Detaillierte Erklärung zum Erstellen einer MySQL-Master-Slave-Umgebung mit Docker

Vorwort Dieser Artikel beschreibt, wie ich Docker...

js, um einfache Lupeneffekte zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis

Im vorherigen Artikel habe ich das ausführliche T...

Die vue-cli-Konfiguration verwendet den vollständigen Prozessdatensatz von Vuex

Inhaltsverzeichnis Vorwort Installation und Verwe...

So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux

Dieser Artikel beschreibt, wie man über Docker ei...

Detaillierte Erläuterung der Nginx-Weiterleitungssocket-Portkonfiguration

Gängige Szenarien für die Weiterleitung von Socke...

Das Vue-Cropper-Plugin realisiert die Kapselung der Bildaufnahme- und Upload-Komponente

Der spezifische Code zum Einkapseln der Bildaufna...