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 Rahmen des Wurzelelements.
- Nachkommende nicht positionierte Elemente, in der Reihenfolge ihres Auftretens im HTML.
- Schwebende Elemente.
- Nachkommende positionierte Elemente, in der Reihenfolge ihres Auftretens im HTML.
Sehen Sie sich Arten der Positionierung an, um eine Erklärung von positionierten und nicht positionierten Elementen zu erhalten.
Hinweis:
Wenn ein opacity-Wert auf ein nicht positioniertes Element angewendet wird (d.h. DIV #4 im untenstehenden Beispiel), passiert etwas Merkwürdiges: Der Hintergrund und der Rahmen dieses Blocks erscheinen über den schwebenden und den positionierten Blöcken. Dies liegt an einem eigenartigen Teil der Spezifikation: Die Anwendung eines opacity-Wertes erstellt einen neuen Stapelkontext (siehe What No One Told You About Z-Index).
Beispiel
In diesem Beispiel können Sie sehen, dass der Hintergrund und der Rahmen des nicht positionierten Elements (DIV #4) völlig unbeeinflusst von den schwebenden Elementen sind, aber der Inhalt ist betroffen. Dies geschieht gemäß dem Standardverhalten von Floats, was mit einer zur obigen Liste hinzugefügten Regel gezeigt werden kann:
- Der Hintergrund und die Rahmen des Wurzelelements.
- Nachkommende nicht positionierte Elemente, in der Reihenfolge ihres Auftretens im HTML.
- Schwebende Elemente.
- Nachkommende nicht positionierte Inline-Elemente.
- Nachkommende positionierte Elemente, in der Reihenfolge ihres Auftretens 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 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 0px 10px;
text-align: left;
}