Stapeln von schwebenden Elementen
Bei schwebenden Elementen ist die Stapelreihenfolge etwas anders. Schwebende Elemente werden zwischen nicht positionierten Elementen und positionierten Elementen platziert:
- Der Hintergrund und die Ränder des Wurzelelements.
- Nachkommende nicht positionierte Elemente, in der Reihenfolge ihres Erscheinens im HTML.
- Schwebende Elemente.
- Nachkommende positionierte Elemente, in der Reihenfolge ihres Erscheinens im HTML.
Siehe Arten der Positionierung für eine Erklärung von positionierten und nicht positionierten Elementen.
Hinweis:
Wenn einem nicht positionierten Element (z.B. DIV #4 im untenstehenden Beispiel) ein opacity-Wert zugewiesen wird, passiert etwas Merkwürdiges: Der Hintergrund und der Rand dieses Blocks erscheinen über den schwebenden Blöcken und den positionierten Blöcken. Dies liegt an einem eigenartigen Teil der Spezifikation: Das Anwenden eines opacity-Wertes erzeugt einen neuen Stapelkontext (siehe What No One Told You About Z-Index).
Beispiel
Sie können in diesem Beispiel sehen, dass der Hintergrund und der Rand des nicht positionierten Elements (DIV #4) völlig unbeeinflusst von schwebenden Elementen ist, der Inhalt jedoch betroffen ist. Dies geschieht gemäß dem standardmäßigen Verhalten von Floats, welches durch eine Regel, die zur obigen Liste hinzugefügt wird, gezeigt werden kann:
- Der Hintergrund und die Ränder des Wurzelelements.
- Nachkommende nicht positionierte Elemente, in der Reihenfolge ihres Erscheinens im HTML.
- Schwebende Elemente.
- Nachkommende nicht positionierte Inline-Elemente.
- Nachkommende positionierte Elemente, in der Reihenfolge ihres Erscheinens im HTML.
HTML
<div id="abs1"><strong>DIV #1</strong><br />position: absolute;</div>
<div id="flo1"><strong>DIV #2</strong><br />float: left;</div>
<div id="flo2"><strong>DIV #3</strong><br />float: right;</div>
<br />
<div id="sta1"><strong>DIV #4</strong><br />no positioning</div>
<div id="abs2"><strong>DIV #5</strong><br />position: absolute;</div>
<div id="rel1"><strong>DIV #6</strong><br />position: relative;</div>
CSS
div {
padding: 10px;
text-align: center;
}
strong {
font-family: sans-serif;
}
#abs1 {
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #990000;
background-color: #ffdddd;
}
#sta1 {
height: 100px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 10px;
text-align: left;
}
#flo1 {
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
}
#flo2 {
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
}
#abs2 {
position: absolute;
width: 150px;
height: 100px;
top: 80px;
left: 100px;
border: 1px dashed #999900;
background-color: #ffdddd;
}
#rel1 {
position: relative;
border: 1px dashed #999966;
background-color: #ccffff;
margin: 0px 10px;
text-align: left;
}