Stapelkontext Beispiel 2

Dies ist ein sehr einfaches Beispiel, aber es ist der Schlüssel zum Verständnis des Konzepts des Stapelkontexts. Es gibt dieselben vier DIVs des vorherigen Beispiels, aber jetzt werden z-index Eigenschaften auf beiden Ebenen der Hierarchie zugewiesen.

Sie können sehen, dass DIV #2 (z-index: 2) über DIV #3 (z-index: 1) liegt, da beide zum selben Stapelkontext gehören (dem Wurzel-Kontext), so dass die z-index Werte bestimmen, wie Elemente gestapelt werden.

Was als merkwürdig angesehen werden kann, ist, dass DIV #2 (z-index: 2) über DIV #4 (z-index: 10) liegt, trotz ihrer z-index Werte. Der Grund dafür ist, dass sie nicht zum selben Stapelkontext gehören. DIV #4 gehört zu dem Stacking-Kontext, der durch DIV #3 erzeugt wurde, und wie bereits erklärt, befindet sich DIV #3 (und sein gesamter Inhalt) unter DIV #2.

Zum besseren Verständnis der Situation sehen Sie hier die Hierarchie des Stapelkontexts:

Wurzel-Stapelkontext
- DIV #2 (z-index 2)
- DIV #3 (z-index 1)
  - DIV #4 (z-index 10)

Hinweis: Es ist zu beachten, dass sich die HTML-Hierarchie im Allgemeinen von der Stapelkontexthierarchie unterscheidet. In der Stapelkontexthierarchie werden Elemente, die keinen Stapelkontext erzeugen, an ihrem übergeordneten Element zusammengeklappt.

Beispiel

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/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;
}


</style></head>

<body>

    <br />

    <div id="div1"><br />
        <span class="bold">DIV #1</span><br />
        position: relative;
        <div id="div2"><br />
            <span class="bold">DIV #2</span><br />
            position: absolute;<br />
            z-index: 2;
        </div>
    </div>

    <br />

    <div id="div3"><br />
        <span class="bold">DIV #3</span><br />
        position: relative;<br />
        z-index: 1;
        <div id="div4"><br />
            <span class="bold">DIV #4</span><br />
            position: absolute;<br />
            z-index: 10;
        </div>
    </div>

</body>
</html>

Siehe auch

Stapeln ohne die Eigenschaft z-index: Die Stapelungsregeln, die gelten, wenn der z-index nicht verwendet wird.
Stapeln mit fließenden Blöcken: Wie fließende Elemente beim Stapeln behandelt werden.
Verwenden von z-index: Wie Sie z-index verwenden, um die Standardstapelung zu ändern.
Der Stapelkontext: Hinweise zum Stapelkontext.
Stapelkontext-Beispiel 1: 2-stufige HTML-Hierarchie, z-index auf der letzten Stufe
Stapelkontext-Beispiel 3: 3-stufige HTML-Hierarchie, z-index auf der zweiten Ebene

Original Dokumenteninformation

Autor(s): Paolo Lombardi
Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für YappY. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der Creative Commons: Attribution-Sharealike license zu teilen.
Letzte Aktualisation: 9. July 2005