Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Beispiel für Stacking-Kontext 2
Beschreibung
Dies ist ein einfaches Beispiel, aber es ist der Schlüssel zum Verständnis des Konzepts desStacking-Kontexts. Es gibt die gleichen vier DIV-Elemente wie im vorherigen Beispiel, aber jetzt sindz-index-Eigenschaften auf beiden Ebenen der Hierarchie zugewiesen.
Sie können sehen, dass DIV #2 (z-index: 2) über DIV #3 (z-index: 1) ist, da sie beide zum selben Stacking-Kontext gehören (dem Root-Kontext), sodassz-index-Werte bestimmen, wie Elemente gestapelt werden.
Was als seltsam angesehen werden kann, ist, dass DIV #2 (z-index: 2) über DIV #4 (z-index: 10) liegt, trotz ihrerz-index-Werte. Der Grund dafür ist, dass sie nicht zum selben Stacking-Kontext gehören. DIV #4 gehört zum Stacking-Kontext, der durch DIV #3 erstellt wird, und wie zuvor erklärt, ist DIV #3 (und sein gesamter Inhalt) unter DIV #2.
Um die Situation besser zu verstehen, hier ist die Hierarchie der Stacking-Kontexte:
- Root-Stacking-Kontext
- DIV #2 (
z-index: 2) - DIV #3 (
z-index: 1)- DIV #4 (
z-index: 10)
- DIV #4 (
- DIV #2 (
Hinweis:Es ist wichtig zu erinnern, dass die HTML-Hierarchie von der Stacking-Kontext-Hierarchie verschieden ist. In der Stacking-Kontext-Hierarchie werden Elemente, die keinen Stacking-Kontext erstellen, im Eltern-Element zusammengefasst.
Beispiel
HTML
<div> <br /> <span>DIV #1</span><br /> position: relative; <div> <br /> <span>DIV #2</span><br /> position: absolute;<br /> z-index: 2; </div></div><br /><div> <br /> <span>DIV #3</span><br /> position: relative;<br /> z-index: 1; <div> <br /> <span>DIV #4</span><br /> position: absolute;<br /> z-index: 10; </div></div>CSS
div { font: 12px "Arial";}span.bold { font-weight: bold;}#div2 { z-index: 2;}#div3 { z-index: 1;}#div4 { z-index: 10;}#div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px;}#div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center;}#div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px;}