Spezifische Verwendung des Stapelkontexts in CSS

Vorwort

Unter dem Einfluss einiger CSS-Interaktionen wird z-index nicht entsprechend der tatsächlichen Größe überlagert. Ich habe das Prinzip dahinter nie verstanden. Vor kurzem habe ich die relevanten Informationen speziell überprüft und eine kleine Zusammenfassung erstellt.

Stapelkontext und Stapelreihenfolge

Der Stapelkontext ist ein dreidimensionales Konzept in HTML, nämlich die Z-Achse des Elements. Mit Stapelreihenfolge ist die spezifische vertikale Anzeigereihenfolge beim Stapeln gemeint.

Kaskadierende Kriterien

Wer älter ist, geht zuerst

Wenn eine explizite Stapelebenenangabe vorliegt, wie etwa ein identifizierter z-indx -Wert, überschreibt der Wert mit dem größeren Stapelebenenwert den Wert mit dem kleineren Stapelebenenwert im gleichen Stapelkontext.

Komm von hinten

Wenn die Stapelebenen der Elemente konsistent sind und die Stapelreihenfolge dieselbe ist, überdecken die späteren Elemente im DOM-Fluss die früheren Elemente.

Eigenschaften von Stapelkontexten

Ein Stapelkontext weist die folgenden Merkmale auf:

• Der Stapelkontext hat eine höhere Stapelebene als gewöhnliche Elemente.
• Stapelkontexte können den Mischmodus eines Elements blockieren.
• Stapelkontexte können verschachtelt werden, und der innere Stapelkontext und alle seine untergeordneten Elemente unterliegen dem äußeren Stapelkontext.
• Jeder Stapelkontext ist unabhängig von seinen Geschwisterelementen. Dies bedeutet, dass beim Durchführen von Stapeländerungen oder beim Rendern nur untergeordnete Elemente berücksichtigt werden müssen.
• Jeder Stapelkontext ist in sich abgeschlossen. Wenn ein Element gestapelt wird, wird davon ausgegangen, dass das gesamte Element in der Stapelreihenfolge des übergeordneten Stapelkontexts vorliegt.

Wenn der Z-Index-Wert nicht automatisch ist, wird ein Stapelkontext erstellt

Für positionierte Elemente position: relative; position: absolute; enthalten, sowie für Elemente mit position in FireFox/IE-Browsern wird ein Stapelkontext erstellt, wenn sein z-index -Wert nicht auto ist.

HTML Code

<div Klasse="roter Wrapper">
    <div Klasse="red">Xiaohong</div>
</div>
<div Klasse="grauer Wrapper">
    <div class="gray">Kleines Grau</div>
</div>

CSS Code

.roter Wrapper {
    Position: relativ;
    z-Index: automatisch;
}

.Rot {
    Position: absolut;
    Z-Index: 2;
    Breite: 300px;
    Höhe: 200px;
    Textausrichtung: zentriert;
    Hintergrundfarbe: braun;
}

.grauer Wrapper {
    Position: relativ;
    z-Index: automatisch;
}  

.grau {
    Position: relativ;
    Z-Index: 1;
    Breite: 200px;
    Höhe: 300px;
    Textausrichtung: zentriert;
    Hintergrundfarbe: grau;
} 

Wenn z-index zweier Geschwisterelemente auto ist, handelt es sich um gewöhnliche Elemente, und für die untergeordneten Elemente gilt das Prinzip „Wer größer ist, hat oben“. Daher verliert der graue z-index: 1; gegen den roten z-index: 2; und wird nach unten gedrückt.

Wenn z-index jedoch zu einem numerischen Wert wird, wird ein Stapelkontext erstellt, jedes Stapelelement ist unabhängig voneinander und die untergeordneten Elemente unterliegen der Stapelreihenfolge des übergeordneten Elements. Durch Ändern z-index von Geschwisterelementen von auto auf den Wert „ 0 wird die Stapelbeziehung zwischen ihren untergeordneten Elementen nicht mehr von ihrem eigenen z-index beeinflusst, sondern durch z-index des übergeordneten Elements bestimmt.

z-index des übergeordneten Elements von Xiaohong und Xiaohui wird unten auf 0 angepasst.

.roter Wrapper {
    /* Andere Stile */
    Z-Index: 0;
}  

.grauer Wrapper {
    /* Andere Stile */
    Z-Index: 0;
}

Sie werden feststellen, dass Xiaohui über Xiaohong liegt, da die übergeordneten Elemente von Xiaohui und Xiaohong zu Stapelkontextelementen mit derselben Stapelebene geworden sind, und zwar gemäß dem Prinzip „Letzteres kommt oben“ hinsichtlich der Elementposition im Dokumentfluss.

Der Einfluss von CSS3 auf Stapelkontexte

Anzeige: Flex|Inline-Flex und Stapelkontext

Das übergeordnete Element ist display: flex oder display: inline-flex; und z-index des untergeordneten Elements ist nicht auto . Zu diesem Zeitpunkt ist dieses untergeordnete Element (beachten Sie, dass es hier ein untergeordnetes Element ist) das Stapelkontextelement.

HTML Code

<div Klasse="Wrapper">
    <div Klasse="grau">
        Kleiner Grauer<div class="red">Kleiner Roter</div>
    </div>
</div>

CSS Code

.wrapper {
    Anzeige: Flex;
}

.grau {
    Z-Index: 1;
    Breite: 200px;
    Höhe: 300px;
    Textausrichtung: zentriert;
    Hintergrundfarbe: grau;
}  

.Rot {
    z-Index: -1;
    Breite: 300px;
    Höhe: 200px;
    Textausrichtung: zentriert;
    Hintergrundfarbe: braun;
    Position: relativ;
}

Auf diese Weise wird es zu einem Stapelkontextelement, weil das übergeordnete Element von Xiaohui über display: flex; verfügt und sein eigener z-index nicht auto ist. Das ursprüngliche Xiaohong-Unterelement wird durch Xiaohui ersetzt.

Mix-Blend-Modus und Stapelkontext

Ein Element mit mix-blend-mode ist ein Stapelkontextelement

Mit der CSS-Eigenschaft „Mix-Blend-Mode“ können Inhalt und Hintergrund des überlagerten Elements miteinander verschmelzen.

Der Code ist derselbe wie oben. Fügen Sie einfach mix-blend-mode zum Grau hinzu. Um den Mischeffekt zu sehen, fügen Sie dem äußeren Container ein Hintergrundbild hinzu.

.wrapper {
    Hintergrundbild: url("./jz.png");
}

.grau {
    /* Andere Stile */
    Mix-Blend-Modus: Abdunkeln;
}

Ebenso verfügt Xiaohui über das Attribut mix-blend-mode , das es zu einem Stapelkontextelement macht, wodurch Xiaohui zum unteren Element wird.

Opazität und Stapelkontexte

Wenn opacity eines Elements ungleich 1 ist, handelt es sich bei dem Element um ein Stapelkontextelement.

HTML Code

<div Klasse="grau">
    Kleiner Grauer<div class="red">Kleiner Roter</div>
</div>

CSS Code

.grau {
    Z-Index: 1;
    Breite: 200px;
    Höhe: 300px;
    Textausrichtung: zentriert;
    Hintergrundfarbe: grau;
    Deckkraft: 0,5;
}

.Rot {
    z-Index: -1;
    Breite: 300px;
    Höhe: 200px;
    Textausrichtung: zentriert;
    Hintergrundfarbe: braun;
    Position: relativ;
} 

Da das graue Element über die opacity verfügt, wird es zu einem Stapelkontextelement, sodass das rote Element z-index: -1; es auch nicht durchdringen kann.

Transformationen und Stapelkontexte

Das Element, auf das transform angewendet wird, ist das Stapelkontextelement

Der Code ist derselbe wie oben, außer dass die transform auf Grau angewendet wird.

.grau {
    /* Andere verwandte Stile */
    transformieren: drehen (30 Grad);
} 

In ähnlicher Weise wird das graue Element durch Anwenden der transform Transformation in ein Stapelkontextelement umgewandelt, sodass das rote Element z-index: -1; es ebenfalls nicht durchdringen kann.

Filter und Stapelkontext

Ein Element mit filter ist ein Stapelkontextelement

Der Code ist derselbe wie oben, außer dass filter zu Xiaohui hinzugefügt wird.

.grau {

    /* Andere verwandte Stile */
    Filter: Unschärfe (5px);
} 

In ähnlicher Weise verfügt das graue Element über ein filter und wird zu einem Stapelkontextelement, sodass sich das rote Element z-index: -1; immer noch über dem grauen Element befindet.

Willensänderung und Stapelkontext

Ein Element mit will-change ist ein Stapelkontextelement.

Der Code ist derselbe wie oben, außer dass dem grauen Element will-change hinzugefügt wird.

.grau {
    /* Andere verwandte Stile */
    Filter: wird sich ändern;
}

Das Ergebnis ist das gleiche wie oben.

Zusammenfassen

Um die Elementstapelregeln im Allgemeinen zu verstehen, müssen wir zunächst verstehen, wann ein Element ein Stapelkontextelement ist.

• Elemente mit dem Positionierungsattribut „position: relative|absolute|fixed“ und deren Z-Index nicht „auto“ ist (in WebKit-basierten Browsern unterliegt die feste Positionierung keiner derartigen Einschränkung), sind Stapelkontextelemente.
• Elemente haben einige CSS3-Eigenschaften, die zu Stapelkontextelementen werden können:
• Das übergeordnete Element ist display: flex|inline-flex; der Z-Index des untergeordneten Elements ist nicht auto. Zu diesem Zeitpunkt ist dieses untergeordnete Element (beachten Sie, dass es sich hier um ein untergeordnetes Element handelt) das Stapelkontextelement
• Elemente mit der Eigenschaft „Mix-Blend-Mode“
• Elemente, deren Opazitätsattribut nicht 1 ist
• Elemente mit Transform
• Elemente mit dem Filterattribut
• Elemente mit dem Attribut „will-change“

Zweitens müssen wir das Stapelprinzip verstehen: „der Größere kommt oben“, „der Spätere kommt oben“, und schließlich müssen wir die Hauptmerkmale des Stapelkontexts verstehen (Einzelheiten finden Sie im Artikel Merkmale des Stapelkontexts).

Dies ist das Ende dieses Artikels über die spezifische Verwendung von Stapelkontext in CSS. Weitere relevante Inhalte zum CSS-Stapelkontext finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!