Verwendung von z-index

Der erste Artikel dieses Leitfadens, Stapelung ohne die z-index Eigenschaft, erklärt, wie Stapelstandardmäßig angeordnet sind. Wenn Sie eine benutzerdefinierte Stapelreihenfolge erstellen möchten, können Sie die z-index-Eigenschaft auf ein positioniertes Element anwenden.

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 bekannt ist, stellen Sie sich die Seite als ein Stapel von Schichten vor, von denen jede eine Zahl hat. Schichten werden in numerischer Reihenfolge gerendert, wobei größere Zahlen über kleineren Zahlen liegen (X repräsentiert eine beliebige positive Ganzzahl):

Schicht Beschreibung
Unterste Schicht Am weitesten vom Betrachter 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 Betrachter

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 teilen (d.h. sie sich auf derselben Schicht befinden), gelten die Stapelregeln, die im Abschnitt Stapelung ohne die z-index Eigenschaft erklärt werden.

Beispiel

In diesem Beispiel wird die Stapelreihenfolge der Schichten mit z-index neu angeordnet. Der z-index von DIV #5 hat keine Wirkung, 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