Verwendung von z-index

Der erste Artikel dieses Leitfadens, Stapeln ohne die z-index-Eigenschaft, erklärt, wie das Stapeln standardmäßig arrangiert wird. Wenn Sie eine benutzerdefinierte Stapelreihenfolge erstellen möchten, können Sie die z-index-Eigenschaft auf einem positionierten Element verwenden.

Die z-index-Eigenschaft kann mit einem ganzzahligen Wert (positiv, null oder negativ) angegeben werden, der die Position des Elements entlang einer imaginären z-Achse darstellt. Wenn Ihnen der Begriff 'z-Achse' nicht vertraut ist, stellen Sie sich die Seite als einen Stapel von Schichten vor, von denen jede eine Nummer hat. Schichten werden in nummerischer Reihenfolge gerendert, wobei größere Zahlen über kleineren liegen (X steht für eine beliebige positive Ganzzahl):

Schicht Beschreibung
Unterste Schicht Am weitesten vom Beobachter entfernt
Schicht -X Schichten mit negativen z-index-Werten
Schicht 0 Standard-Rendering-Schicht
Schicht X Schichten mit positiven z-index-Werten
Oberste Schicht Am nächsten zum Beobachter

Hinweis:

  • Wenn keine z-index-Eigenschaft angegeben ist, werden Elemente auf der Standard-Rendering-Schicht (Schicht 0) gerendert.
  • Wenn mehrere Elemente denselben z-index-Wert haben (d.h. sich auf derselben Schicht befinden), gelten die in dem Abschnitt Stapeln ohne die z-index-Eigenschaft erläuterten Stapelregeln.

Beispiel

In diesem Beispiel wird die Stapelreihenfolge der Schichten mithilfe von z-index neu angeordnet. Der z-index von DIV #5 hat keine Auswirkung, da es sich nicht um ein positioniertes Element handelt.

HTML

html
<div id="abs1">
  <strong>DIV #1</strong>
  <br />position: absolute; <br />z-index: 5;
</div>

<div id="rel1">
  <strong>DIV #2</strong>
  <br />position: relative; <br />z-index: 3;
</div>

<div id="rel2">
  <strong>DIV #3</strong>
  <br />position: relative; <br />z-index: 2;
</div>

<div id="abs2">
  <strong>DIV #4</strong>
  <br />position: absolute; <br />z-index: 1;
</div>

<div id="sta1">
  <strong>DIV #5</strong>
  <br />no positioning <br />z-index: 8;
</div>

CSS

css
div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#rel1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  z-index: 8;
  height: 70px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}

Ergebnis

Siehe auch