Verständnis von z-index

Ebenen auf der z-Achse

Die auf einer Seite dargestellten Elemente bestehen aus einer Reihe von Boxen. Jede Box hat eine Position in drei Dimensionen. Zusätzlich zu ihren Inline- und Block-Positionen liegen die Boxen entlang einer dritten Dimension, bekannt als die z-Achse. Die Steuerung der z-Achsen-Position eines Elements wird besonders relevant, wenn sich die Boxen von Elementen visuell überlappen. Mehrere Eigenschaftswerte können dazu führen, dass sich Elemente überlappen. Die z-index-Eigenschaft bietet Ihnen eine Möglichkeit, zu steuern, wie sie sich überlappen!

Standardmäßig werden Elementboxen auf Schicht 0 gerendert. Die z-index-Eigenschaft ermöglicht es Ihnen, Elemente auf verschiedenen Ebenen entlang der z-Achse zu positionieren, zusätzlich zur Standard-Rendering-Schicht. Die Position jedes Elements entlang der imaginären z-Achse (z-index-Wert) wird als Ganzzahl (positiv, negativ oder null) ausgedrückt und steuert die Stapelreihenfolge während des Renderings. Größere Zahlen bedeuten, dass die Elemente dem Betrachter näher sind.

Wenn Sie mit dem Begriff 'z-Achse' nicht vertraut sind, stellen Sie sich die Seite als Stapel von Ebenen vor, von denen jede eine zugewiesene Nummer hat. Die Ebenen werden in numerischer Reihenfolge gerendert, wobei größere Zahlen über kleineren Zahlen erscheinen (X in der unten stehenden Tabelle repräsentiert eine beliebige positive Ganzzahl):

Elemente im normalen Fluss

Standardmäßig, wenn keine z-index-Eigenschaft angegeben ist, werden die Elemente auf der Standard-Rendering-Schicht (Ebene 0) gerendert.

Betrachten Sie die folgenden drei Elemente:

<div id="div1">#1</div>
<div id="div2">#2</div>
<div id="div3">#3</div>

Ohne jegliche angewendete Positionierungseigenschaften fließen diese Elemente in Dokumentenreihenfolge normal nacheinander, ohne Überlappung.

div {
  height: 100px;
  width: 100px;
  outline: 1px dotted;
  line-height: 100px;
  font-size: 40px;
  text-align: center;
  font-family: "Helvetica", "Arial", sans-serif;
}

#div1 {
  background-color: lightpink;
}

#div2 {
  background-color: lightyellow;
}

#div3 {
  background-color: lightgreen;
}

Standard-Layer-Verhalten

Um die Elemente zu stapeln, können wir sie positionieren. Wenn wir absolute Positionierung verwenden, um sie (fast) an derselben Stelle zu platzieren, folgt die Standardstapelordnung der Quellreihenfolge: Das erste Element im HTML erscheint auf der untersten Ebene und das letzte Element auf der obersten Ebene.

div {
  position: absolute;
}

#div1 {
  top: 0;
  left: 0;
}

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

#div3 {
  top: 20px;
  left: 20px;
}

Neuordnung der Ebenen

Wir können die CSS-z-index-Eigenschaft verwenden, um jedes Element entlang der z-Achse zu positionieren und damit die Stapelreihenfolge effektiv neu zu ordnen.

Durch das Hinzufügen von z-index-Werten ändern wir die Standardebenenreihenfolge:

#div1 {
  z-index: 5;
}

#div2 {
  z-index: -9;
}

#div3 {
  z-index: 0;
}

Das Element mit dem niedrigsten z-index-Wert erscheint auf der untersten Ebene. Das Element mit dem höchsten z-index-Wert erscheint auf der obersten Ebene. In diesem Beispiel ist -9 der niedrigste Wert, daher befindet sich #div2 hinter allen anderen. Das erste Element in der Quellreihenfolge, #div1, hat den größten Wert, daher erscheint es oben auf allen anderen.

Einfluss von Stacking-Kontexten

Die Verwendung von z-index mag zunächst recht einfach erscheinen: eine einzelne Eigenschaft, der eine einzelne Ganzzahl zugewiesen ist, mit einem scheinbar verständlichen Verhalten. Wenn z-index auf komplexe Hierarchien von HTML-Elementen angewendet wird, finden viele das resultierende Verhalten schwer verständlich oder vorhersehbar.

Wenn die Elemente keine Geschwister sind, kann das Stapelverhalten komplizierter werden, da jedes Element zu einem anderen Stacking-Kontext gehören kann. Dies wird im folgenden Beispiel gezeigt.

<section>
  <div id="div1">#1</div>
  <div id="div2">#2</div>
</section>
<div id="div3">#3</div>

section {
  position: absolute;
  z-index: 2;
}

Obwohl der z-index-Wert von #div3 (0) größer ist als der von #div2 (-9), erscheint #div2 über #div3, weil #div1 und #div2 in einem separaten Stacking-Kontext verschachtelt sind, der von <section> erstellt wird. Das <section>-Element und #div3 sind Geschwister, und da der z-index des <section>-Elements größer ist als der von #div3 (2 gegenüber 0), wird #div3 hinter <section> und allen Inhalten von <section> platziert. Für detailliertere Informationen zu diesem Thema lesen Sie unseren Stacking-Kontext-Leitfaden.

Fazit

Wie wir in diesem Leitfaden gesehen haben, bietet z-index eine Möglichkeit, zu steuern, wie Elemente entlang der z-Achse gestapelt werden. Sie haben gelernt, wie die Ganzzahlen der z-index-Eigenschaft verwendet werden können, um die Stapelreihenfolge zu ändern. Wie im letzten Beispiel gezeigt, können Stapelreihenfolgen jedoch kompliziert sein. Stapelreihenfolgen folgen einer Reihe komplexer Stapelregeln, um sicherzustellen, dass alle Browser denselben Inhalt auf die gleiche Weise stapeln, und dadurch Konsistenz und Vorhersehbarkeit bieten. Es ist wichtig, die Merkmale, die Stacking-Kontexte erstellen, und wie verschachtelte Stacking-Kontexte die Reihenfolge der Ebenen beeinflussen, zu verstehen.

Siehe auch

• Stapeln ohne die z-index-Eigenschaft
• Stapeln von schwebenden Elementen
• Verwendung von z-index
• Stacking-Kontext
• Modul CSS positioniertes Layout