Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Stapeln schwebender Elemente
Für schwebende Elemente ist die Stapelreihenfolge etwas anders. Schwebende Elemente werden zwischen nicht positionierten und positionierten Elementen platziert:
- Der Hintergrund und die Rahmen des Wurzelelements.
- Nachfahren nicht positionierte Elemente, in der Reihenfolge ihres Auftretens im HTML.
- Schwebende Elemente.
- Nachfahren positionierte Elemente, in der Reihenfolge ihres Auftretens im HTML.
SieheArten der Positionierung für eine Erklärung von positionierten und nicht positionierten Elementen.
Hinweis:Wenn einopacity-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 besonderen Teil der Spezifikation: Die Anwendung einesopacity-Wertes erstellt einen neuen Stapelkontext (sieheWhat No One Told You About Z-Index).
Beispiel
In diesem Beispiel sehen Sie, dass der Hintergrund und der Rahmen des nicht positionierten Elements (DIV #4) völlig unbeeinflusst von schwebenden Elementen sind, der Inhalt jedoch betroffen ist. Dies geschieht entsprechend dem Standardverhalten von Floats, das mit einer Regel, die zur obigen Liste hinzugefügt wird, gezeigt werden kann:
- Der Hintergrund und die Rahmen des Wurzelelements.
- Nachfahren nicht positionierte Elemente, in der Reihenfolge ihres Auftretens im HTML.
- Schwebende Elemente.
- Nachfahren nicht positionierte Inline-Elemente.
- Nachfahren positionierte Elemente, in der Reihenfolge ihres Auftretens im HTML.
HTML
<div><strong>DIV #1</strong><br />position: absolute;</div><div><strong>DIV #2</strong><br />float: left;</div><div><strong>DIV #3</strong><br />float: right;</div><br /><div><strong>DIV #4</strong><br />no positioning</div><div><strong>DIV #5</strong><br />position: absolute;</div><div><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;}