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):

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

<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>

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