Stapeln mit fließenden Blöcken

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:

1. Der Hintergrund und die Ränder des Wurzelelements
2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
3. Fließende Blöcke
4. 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:

1. Der Hintergrund und die Ränder des Wurzelelements
2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
3. Schwebende Blöcke
4. Nachfolgende nicht-positionierte Inline-Elemente
5. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der 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>

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