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.

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

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