Beispielcode für CSS-Stacking und Z-Index

Kaskadierung und kaskadierende Ebenen

HTML-Elemente sind dreidimensionale Konzepte. Zusätzlich zur horizontalen und vertikalen Richtung werden sie auch auf der „Z-Achse“ gestapelt.
Da es sich um eine Überlagerung handelt, stellt sich die Frage der Reihenfolge, die in der Spezifikation als „kaskadierende Ebene“ bezeichnet wird.
Standardmäßig bilden Bilder und Text den Kern einer Webseite, daher sollte die Ebene der Inline-Elemente die höchste sein; dann kommt das Layout, bei dem schwebende Elemente (außerhalb des Dokumentflusses) eine höhere Ebene haben als Elemente auf Blockebene; die niedrigste Ebene ist das Element, das dekorative Attribute wie Hintergrund und Rahmen festlegt.

Beispiel:

<Stil>
    .F {
        Hintergrundfarbe: #ccffcc;
        Rand: 1px gestrichelt #669966;
        Polsterung: 10px;
    }
    
    .f div:Erster-des-Typs,
    .f div:letzter-vom-Typ {
        Hintergrundfarbe: rgba(255, 221, 221, .8);
        Rand: 1px gestrichelt #990000;
        Breite: 200px;
        Höhe: 70px;
        Rand links: 10px;
    }
    
    .f div:letzter-vom-Typ {
        Hintergrundfarbe: rgba(221, 221, 255, .8);
        Rand: 1px gestrichelt #000099;
        schweben: links;
        Rand oben: -90px;
        Rand links: 30px;
    }
    
    Etikett {
        Hintergrundfarbe: rgba(247, 236, 27, 0,8);
        Rand: 1px gestrichelt #FFC107;
        Polsterung: 5px;
    }
</Stil>

<div Klasse="f">
    <label>hallo</label>
    <div></div>
    <div></div>
</div> 

Wenn sich Elemente überlappen, überdeckt das Element mit der höheren Stapelebene das kleinere. Wenn die beiden Elemente die gleiche Stapelebene haben, überdeckt das letztere das erstere entsprechend der Renderreihenfolge.

Beispiel:

<Stil>
    .F {
        Hintergrundfarbe: #ccffcc;
        Rand: 1px gestrichelt #669966;
        Polsterung: 10px;
        Überlauf: versteckt;
    }
    
    .f div:Erster-des-Typs,
    .f div:letzter-vom-Typ {
        Hintergrundfarbe: rgba(255, 221, 221, .8);
        Rand: 1px gestrichelt #990000;
        Breite: 200px;
        Höhe: 70px;
        schweben: links;
    }
    
    .f div:letzter-vom-Typ {
        Hintergrundfarbe: rgba(221, 221, 255, .8);
        Rand: 1px gestrichelt #000099;
        Rand oben: -40px;
        Rand links: 30px;
    }
</Stil>

<div Klasse="f">
    <div></div>
    <div></div>
</div> 

Z-Index kann die Stapelebene beeinflussen

Wenn Sie die Stapelebene eines Elements ändern müssen, können Sie den Z-Index auf dem positionierten Element verwenden (1).

Der Z-Index kann eine positive Ganzzahl, 0 oder eine negative Ganzzahl sein. Wenn kein Z-Index vorhanden ist (Standard: Z-Index: auto) oder der Z-Index manuell auf „auto“ eingestellt ist, wird er als 0 behandelt.

*(1) Bezieht sich auf Elemente, deren Positionswert relativ, absolut oder fest ist.

Beispiel:

<Stil>
    .F {
        Hintergrundfarbe: #ccffcc;
        Rand: 1px gestrichelt #669966;
        Polsterung: 10px;
        Position: relativ;
        Z-Index: 0;
    }
    
    .f div:Erster-des-Typs,
    .f div:letzter-vom-Typ {
        Hintergrundfarbe: rgba(255, 221, 221, .8);
        Rand: 1px gestrichelt #990000;
        Breite: 200px;
        Höhe: 70px;
        Rand links: 10px;
    }
    
    .f div:letzter-vom-Typ {
        Hintergrundfarbe: rgba(221, 221, 255, .8);
        Rand: 1px gestrichelt #000099;
        Rand links: 30px;
        Position: absolut;
        oben: 14px;
        /* z-index: -1; */
    }
    
    Etikett {
        Hintergrundfarbe: rgba(247, 236, 27, 0,8);
        Rand: 1px gestrichelt #FFC107;
        Polsterung: 5px;
    }
</Stil>

<div Klasse="f">
    <label>hallo</label>
    <div></div>
    <div></div>
</div>

Wenn der Z-Index eine positive Ganzzahl, 0 oder Auto ist:

Wenn der Z-Index eine negative Ganzzahl annimmt:

Aufmerksame Personen werden möglicherweise feststellen, dass wir im Beispiel das Positionierungsattribut für das Dekorationselement (Klassenname f) festlegen und den Z-Index auf 0 setzen. Wenn dies nicht festgelegt ist und der Z-Index des Elements (das Testelement mit blauem Hintergrund) eine negative Ganzzahl annimmt, wird es hinter dem dekorativen Element ausgeführt. Zu diesem Punkt werden wir später über „Z-Index nimmt negative Ganzzahlwerte an“ sprechen.

Z-Index und Stapelkontext

Der Z-Index kann die Stapelebene beeinflussen, es gibt jedoch eine sehr wichtige Voraussetzung, nämlich, dass die am Vergleich beteiligten Elemente auf derselben Ebene liegen müssen, was in der Spezifikation als „Stapelkontext“ bezeichnet wird. „Kontext“ bedeutet, dass dies ein geschlossener Bereich ist und die untergeordneten Elemente innerhalb des Bereichs die externen Elemente nicht beeinflussen; und „Stapel“ bedeutet, dass das Element, solange es diesen Bereich erstellt, auf der „Z-Achse“ über dem aktuellen Kontext liegt.
Stapelkontexte können mithilfe einiger CSS-Eigenschaften erstellt werden. Häufige Eigenschaften sind die folgenden:

• Das HTML-Element erstellt einen Standard-Stapelkontext, der als Stamm-Stapelkontext bezeichnet wird, und alle Elemente werden auf dieser Ebene platziert.
• Der Positionswert ist relativ oder absolut und der Z-Indexwert ist nicht auto(1).
• Der Positionswert ist fest.
• Neue CSS3-Eigenschaften, wie etwa Flex- und Raster-Layoutelemente mit Deckkraftwerten ungleich 1, Transformationswerten ungleich Keine und Z-Indexwerten ungleich Auto.

*(1) Obwohl z-index:auto und z-index:0 als dasselbe betrachtet werden können, ist das Element mit z-index:auto nur ein normal positioniertes Element, während z-index:0 einen Stapelkontext erstellt. Wenn die beiden auf derselben Ebene sind, überschreibt Letzteres Ersteres.

In der tatsächlichen Arbeit werden neue CSS3-Eigenschaften selten verwendet, um Stapelkontexte aktiv zu erstellen. Daher besteht die gängigste Methode zum Erstellen eines Stapelkontexts darin, einen Z-Index-Integerwert für das positionierte Element festzulegen.
Wie bereits erwähnt, kann z-index die Stapelebene eines Elements im aktuellen Stapelkontext ändern. Jetzt hat z-index eine andere Bedeutung, nämlich die Erstellung eines neuen Stapelkontexts.
Nachfolgend können wir den Stapelkontext anhand von Beispielen besser verstehen:

Beispiel:

<Stil>
    .F {
        Hintergrundfarbe: #ccffcc;
        Rand: 1px gestrichelt #669966;
        Höhe: 80px;
        Position: relativ;
        Rand unten: 10px;
    }
    
    .f_1>div {
        Hintergrundfarbe: rgba(255, 221, 221, .8);
        Rand: 1px gestrichelt #990000;
        Breite: 150px;
        Höhe: 200px;
        Position: absolut;
        oben: 20px;
        links: 170px;
    }
    
    .f_2>div {
        Hintergrundfarbe: rgba(221, 221, 255, .8);
        Rand: 1px gestrichelt #000099;
        Breite: 200px;
        Höhe: 70px;
        Position: absolut;
        oben: 65px;
        links: 50px;
    }
</Stil>

<div Klasse="f f_1">Nr. 1
    <div>Nr. 3
    </div>
</div>
<div Klasse="f f_2">Nr. 2
    <div>Nr. 4
    </div>
</div>

In diesem Beispiel legt kein Element den Z-Index-Wert fest. In diesem Fall ist der Z-Index der Standardwert „auto“. Daher werden die Elemente in der Reihenfolge gerendert, in der das letztere das erstere abdeckt.
Wenn Sie für Nr. 3 und Nr. 4 positive Z-Indexwerte festlegen, gilt Folgendes:

.f_1>div {
    Z-Index: 1;
}

.f_2>div {
    Z-Index: 2;
}

Zu diesem Zeitpunkt ist für die übergeordneten Elemente Nr. 1 und Nr. 2 kein Z-Index-Wert festgelegt, sodass sie keinen neuen Stapelkontext erstellen. Dies bedeutet, dass Nr. 3 und Nr. 4 weiterhin zum Stammstapelkontext gehören.
Im gleichen Stapelkontext überdecken Elemente mit einer größeren Stapelebene kleinere, sodass Nr. 4 über allen Elementen steht.
Legen Sie nun die Z-Indexwerte für #2, #3 und #4 wie folgt fest:

.f_1>div {
    Z-Index: 2;
}

.f_2 {
    Z-Index: 1;
}

.f_2>div {
    Z-Index: 9;
}

Obwohl der Z-Indexwert von Nr. 4 größer ist als der von Nr. 3, unterliegt die Stapelebene von Nr. 4 vollständig der Ebene von Nr. 2, da es sich bei ihr um ein untergeordnetes Element von Nr. 2 handelt. #2 und #3 gehören zum selben Stammstapelkontext und #3 ist größer als #2, also liegt #3 über #2 (und seinen untergeordneten Elementen).

z-index nimmt einen negativen ganzzahligen Wert an

Es ist allgemein bekannt, dass der Z-Index, wenn er einen negativen Wert annimmt, hinter die Hintergrundfarbe verschoben werden sollte:

Beispiel:

<Stil>
    .F {
        Hintergrundfarbe: rgba(204, 255, 204, .8);
        Rand: 1px gestrichelt #669966;
        Polsterung: 10px;
    }
    
    .f div {
        Hintergrundfarbe: rgba(255, 221, 221, .8);
        Rand: 1px gestrichelt #990000;
        Breite: 200px;
        Höhe: 70px;
        Position: relativ;
        oben: 45px;
        z-Index: -1;
    }
</Stil>

<div Klasse="f">
    <div></div>
</div> 

In der Praxis können negative Z-Indexwerte den Effekt des Ausblendens von Elementen erzielen. Wenn Sie jedoch einen Stapelkontext für das übergeordnete Element erstellen, wird das untergeordnete Element nicht ausgeblendet:

Beispiel:

<Stil>
    .F {
        Hintergrundfarbe: rgba(204, 255, 204, .8);
        Rand: 1px gestrichelt #669966;
        Polsterung: 10px;
        Position: relativ;
        Z-Index: 0;
    }
    
    .f div {
        Hintergrundfarbe: rgba(255, 221, 221, .8);
        Rand: 1px gestrichelt #990000;
        Breite: 200px;
        Höhe: 70px;
        Position: relativ;
        oben: 45px;
        z-Index: -1;
    }
</Stil>

<div Klasse="f">
    <div></div>
</div> 

Nach dem Vergleich der Vorher- und Nachher-Beispiele ist es offensichtlich, dass der aktuelle Stapelkontext immer noch nicht durchbrochen werden kann, egal wie negativ der Z-Index ist.

Dies ist das Ende dieses Artikels über CSS-Stacking und Z-Index-Beispielcode. Weitere relevante Inhalte zu CSS-Stacking und Z-Index finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!