Verständnis von z-index

Die auf einer Seite gerenderten Elemente bestehen aus einer Reihe von Boxen. Jede Box hat eine Position in drei Dimensionen. Zusätzlich zu ihren Inline- und Block-Positionen liegen Boxen entlang einer dritten Dimension, die als z-Achse bekannt ist. Die Kontrolle über die Position eines Elements auf der z-Achse wird besonders relevant, wenn sich Element-Boxen 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 Element-Boxen auf Ebene 0 gerendert. Die z-index-Eigenschaft ermöglicht es Ihnen, Elemente auf verschiedenen Ebenen entlang der z-Achse zu positionieren, zusätzlich zur Standard-Render-Ebene. Die Position jedes Elements entlang der imaginären z-Achse (z-index-Wert) wird als ganze Zahl (positiv, negativ oder null) ausgedrückt und steuert die Stapelreihenfolge während des Renderns. Größere Zahlen bedeuten, dass Elemente dem Betrachter näher sind.

Wenn Sie mit dem Begriff "z-Achse" nicht vertraut sind, stellen Sie sich die Seite als einen Stapel von Ebenen vor, die jeweils eine zugewiesene Nummer haben. Ebenen werden in numerischer Reihenfolge gerendert, wobei größere Zahlen über kleineren Zahlen erscheinen (X in der Tabelle unten stellt eine beliebige positive ganze Zahl dar):

Standardmäßig, wenn keine z-index-Eigenschaft angegeben ist, werden Elemente auf der Standard-Render-Ebene (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 angewendete Positionierungseigenschaften fließen diese Elemente normal in der Dokumentenreihenfolge, eines nach dem anderen, ohne sich zu überlappen.

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

#div1 {
  background-color: lightpink;
}

#div2 {
  background-color: lightyellow;
}

#div3 {
  background-color: lightgreen;
}

Um die Elemente zu stapeln, können wir sie positionieren. Wenn wir absolute Positionierung verwenden, um sie (fast) an dieselbe Stelle zu setzen, folgt die Standard-Stapelreihenfolge der Quellreihenfolge: Das erste Element im HTML erscheint in der untersten Ebene und das letzte Element in der obersten Ebene.

div {
  position: absolute;
}

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

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

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

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

Indem wir z-index-Werte hinzufügen, ändern wir die Standard-Ebenenreihenfolge:

#div1 {
  z-index: 5;
}

#div2 {
  z-index: -9;
}

#div3 {
  z-index: 0;
}

Das Element mit dem niedrigsten z-index-Wert erscheint in der untersten Ebene. Das Element mit dem höchsten z-index-Wert erscheint in 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, sodass es über allen anderen erscheint.

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

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, da #div1 und #div2 in einem separaten Stacking-Kontext verschachtelt sind, der von <section> erstellt wurde. 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. Weitere detaillierte Informationen zu diesem Thema finden Sie in unserem Stacking-Kontext-Leitfaden.

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 ganzen Zahlenwerte der z-index-Eigenschaft verwendet werden können, um die Stapelreihenfolge zu ändern. Wie jedoch im letzten Beispiel gezeigt, können Stapelreihenfolgen kompliziert sein. Stapelreihenfolgen folgen einer Reihe von komplexen Stapelregeln, um sicherzustellen, dass alle Browser denselben Inhalt auf die gleiche Weise stapeln, um Konsistenz und Vorhersehbarkeit zu gewährleisten. Es ist wichtig, die Funktionen, die Stacking-Kontexte erstellen und wie verschachtelte Stacking-Kontexte die Ebenenreihenfolge beeinflussen, zu verstehen.

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