Stapeln ohne die Eigenschaft z-index

Wenn die CSS-Eigenschaft z-index bei keinem Element angegeben ist, werden die Elemente in der folgenden Reihenfolge gestapelt (von unten nach oben):

Der Hintergrund und die Ränder des Wurzelelements
Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei

Beachten Sie, dass die CSS-Eigenschaft order, wenn sie das Rendering von der "Reihenfolge des Erscheinens im HTML" innerhalb von flex (en-US)-Containern ändert, auch die Reihenfolge für den Stapelkontext beeinflusst.

Im folgenden Beispiel sind die Elemente #1 bis #4 positionierte Elemente. Element Nr. 5 ist statisch und wird daher unter den anderen vier Elementen gezeichnet, obwohl es im HTML-Markup später kommt.

Figure 1. Exemple de règles d'empilement sans propriété z-index

Quellcode für das Beispiel

HTML

<div id="abs1" class="absolute">
  <b>DIV #1</b><br />position: absolute;</div>
<div id="rel1" class="relative">
  <b>DIV #2</b><br />position: relative;</div>
<div id="rel2" class="relative">
  <b>DIV #3</b><br />position: relative;</div>
<div id="abs2" class="absolute">
  <b>DIV #4</b><br />position: absolute;</div>
<div id="sta1" class="static">
  <b>DIV #5</b><br />position: static;</div>

CSS

b {
  font-family: sans-serif;
}

div {
  padding: 10px;
  border: 1px dashed;
  text-align: center;
}

.static {
  position: static;
  height: 80px;
  background-color: #ffc;
  border-color: #996;
}

.absolute {
  position: absolute;
  width: 150px;
  height: 350px;
  background-color: #fdd;
  border-color: #900;
  opacity: 0.7;
}

.relative {
  position: relative;
  height: 80px;
  background-color: #cfc;
  border-color: #696;
  opacity: 0.7;
}

#abs1 {
  top: 10px;
  left: 10px;
}

#rel1 {
  top: 30px;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  top: 15px;
  left: 20px;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  top: 10px;
  right: 10px;
}

#sta1 {
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}

Siehe auch

Stapeln mit fließenden Blöcken: Wie fließende (float) Elemente beim Stapeln behandelt werden.
Verwenden von 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