CSS-Layout - z-index-Eigenschaft

z-index Eigenschaft legt die Stacking-Ordnung des Elements fest.

z-index-Eigenschaft

Wenn ein Element positioniert wird, kann es mit anderen Elementen überlappen.

z-index Eigenschaft legt die Stacking-Ordnung des Elements fest (welches Element vorne und welches hinten stehen soll).

Die Stacking-Ordnung eines Elements kann positiv oder negativ sein：

Dies ist ein Titel

weil das Bild z-index wird auf -1 gesetzt, sodass es hinter dem Text positioniert wird。

Beispiel

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Selbst ausprobieren

Hinweis:z-index gilt nur fürpositionierte Elemente（position: absolute、position: relative、position: fixed oder position: sticky）undFlexible Projekt（display: flex direkte Nachkommen des Elements）。

Ein weiteres z-index-Beispiel

Beispiel

Hier sehen wir, dass Elemente mit höherer Stacking-Ordnung immer über Elementen mit niedrigerer Stacking-Ordnung liegen:

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Schwarze Box</div>
  <div class="gray-box">Graue Box</div>
  <div class="green-box">Grüne Box</div>
</div>
</body>
</html>

Selbst ausprobieren

kein z-index

wenn zwei positionierte Elemente ohne z-index im Falle von ÜberschneidungenIm HTML-Code zuletzt definierteDer Elemente wird am obersten angezeigt.

Beispiel

Wie im obigen Beispiel, aber hier wird nicht angegeben z-index：

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Schwarze Box</div>
  <div class="gray-box">Graue Box</div>
  <div class="green-box">Grüne Box</div>
</div>
</body>
</html>

Selbst ausprobieren

CSS Eigenschaft

Eigenschaft Beschreibung
z-index Die Stapelreihenfolge der Elemente einstellen.