Stapeln schwebender Elemente

Bei schwebenden Elementen ist die Stapelreihenfolge etwas anders. Schwebende Elemente werden zwischen nicht positionierten und positionierten Elementen platziert:

  1. Der Hintergrund und die Ränder des Wurzelelements.
  2. Nachfolgende nicht positionierte Elemente in der Reihenfolge ihres Auftretens im HTML.
  3. Schwebende Elemente.
  4. Nachfolgende positionierte Elemente in der Reihenfolge ihres Auftretens im HTML.

Siehe Arten der Positionierung für eine Erklärung zu positionierten und nicht positionierten Elementen.

Hinweis: Wenn ein opacity-Wert auf ein nicht positioniertes Element angewendet wird (d.h. DIV #4 im untenstehenden Beispiel), passiert etwas Seltsames: Der Hintergrund und der Rand dieses Blocks erscheinen über den schwebenden und den positionierten Blöcken. Dies liegt an einem besonderen Teil der Spezifikation: Das Anwenden eines opacity-Werts 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 Rand des nicht positionierten Elements (DIV #4) völlig unbeeinflusst von den schwebenden Elementen sind, aber der Inhalt betroffen ist. Dies geschieht in Übereinstimmung mit dem Standardverhalten von Floats, das mit einer Regel, die der obigen Liste hinzugefügt wird, gezeigt werden kann:

  1. Der Hintergrund und die Ränder des Wurzelelements.
  2. Nachfolgende nicht positionierte Elemente in der Reihenfolge ihres Auftretens im HTML.
  3. Schwebende Elemente.
  4. Nachfolgende nicht positionierte Inline-Elemente.
  5. Nachfolgende positionierte Elemente in der Reihenfolge ihres Auftretens im HTML.

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

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 #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;
}

Ergebnis

Siehe auch