Bei fließenden Blöcken (float
) ist die Stapelreihenfolge ein wenig anders. Fließende Blöcke werden zwischen nicht positionierten Blöcken und positionierten Blöcken platziert:
- Der Hintergrund und die Ränder des Wurzelelements
- Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
- Fließende Blöcke
- Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei
Wie Sie im Beispiel unten sehen können, sind Hintergrund und Rahmen des nicht positionierten Blocks (DIV #4) von fließenden Blöcken völlig unbeeinflusst, der Inhalt ist jedoch betroffen. Dies geschieht gemäß dem Standard-Float-Verhalten. Dieses Verhalten kann mit einer zusätzlichen Regel in der obigen Liste dargestellt werden:
- Der Hintergrund und die Ränder des Wurzelelements
- Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
- Schwebende Blöcke
- Nachfolgende nicht-positionierte Inline-Elemente
- Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML
Hinweis: Wenn ein Deckkraftwert (opacity
) auf den nicht positionierten Block (DIV #4) angewendet wird, passiert etwas Seltsames: Der Hintergrund und der Rand dieses Blocks ragen über die schwebenden Blöcke und die positionierten Blöcke hinaus. Das liegt an einem besonderen Teil der Spezifikation: Das Anwenden eines Deckkraftwerts erzeugt einen neuen Stapelkontext (siehe What No One Told You About Z-Index).
Quellcode für das Beispiel
HTML
<div id="abs1">
<b>DIV #1</b><br />position: absolute;</div>
<div id="flo1">
<b>DIV #2</b><br />float: left;</div>
<div id="flo2">
<b>DIV #3</b><br />float: right;</div>
<br />
<div id="sta1">
<b>DIV #4</b><br />no positioning</div>
<div id="abs2">
<b>DIV #5</b><br />position: absolute;</div>
<div id="rel1">
<b>DIV #6</b><br />position: relative;</div>
CSS
div {
padding: 10px;
text-align: center;
}
b {
font-family: sans-serif;
}
#abs1 {
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #900;
background-color: #fdd;
}
#sta1 {
height: 100px;
border: 1px dashed #996;
background-color: #ffc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flo1 {
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #090;
background-color: #cfc;
}
#flo2 {
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #090;
background-color: #cfc;
}
#abs2 {
position: absolute;
width: 150px;
height: 100px;
top: 80px;
left: 100px;
border: 1px dashed #990;
background-color: #fdd;
}
#rel1 {
position: relative;
border: 1px dashed #996;
background-color: #cff;
margin: 0px 10px 0px 10px;
text-align: left;
}
See also
- Stapeln ohne die Eigenschaft z-index: Die Stapelungsregeln, die gelten, wenn
z-index
nicht verwendet wird. - Stapeln mit 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 2: 2-stufige HTML-Hierarchie,
z-index
auf allen Ebenen - 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: 3. November 2004