z-index

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die z-index CSS Eigenschaft legt die Z-Ordnung eines positionierten Elements und seiner Nachkommen oder Flex- und Grid-Elemente fest. Überlappende Elemente mit einem größeren z-index überdecken solche mit einem kleineren.

Probieren Sie es aus

z-index: auto;

z-index: 1;

z-index: 3;

z-index: 5;

z-index: 7;

<section class="default-example container" id="default-example">
 <div id="example-element">Change my z-index</div>
 <div class="block blue position1">z-index: 6</div>
 <div class="block blue position2">z-index: 4</div>
 <div class="block blue position3">z-index: 2</div>
 <div class="block red position4">z-index: auto</div>
 <div class="block red position5">z-index: auto</div>
 <div class="block red position6">z-index: auto</div>
</section>

#example-element {
 top: 15px;
 left: 15px;
 width: 180px;
 height: 230px;
 position: absolute;
 /* center the text so it is visible even when z-index is set to auto */
 line-height: 215px;
 font-family: monospace;
 background-color: #fcfbe5;
 border: solid 5px #e3e0a1;
 z-index: auto;
 color: black;
}
.container {
 display: inline-block;
 width: 250px;
 position: relative;
}
.block {
 width: 150px;
 height: 50px;
 position: absolute;
 font-family: monospace;
 color: black;
}
.blue {
 background-color: #e5e8fc;
 border: solid 5px #112382;
 /* move text to the bottom of the box */
 line-height: 55px;
}
.red {
 background-color: #fce5e7;
 border: solid 5px #e3a1a7;
}
.position1 {
 top: 0;
 left: 0;
 z-index: 6;
}
.position2 {
 top: 30px;
 left: 30px;
 z-index: 4;
}
.position3 {
 top: 60px;
 left: 60px;
 z-index: 2;
}
.position4 {
 top: 150px;
 left: 0;
 z-index: auto;
}
.position5 {
 top: 180px;
 left: 30px;
 z-index: auto;
}
.position6 {
 top: 210px;
 left: 60px;
 z-index: auto;
}

Für ein positioniertes Element (d.h. eines mit einer position ungleich static) gibt die z-index Eigenschaft an:

Die Stapelreihenfolge des Elements im aktuellen Stacking-Kontext.
Ob das Element einen lokalen Stacking-Kontext erstellt.

Syntax

css

/* Keyword value */
z-index: auto;
/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */
/* Global values */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;

Die z-index Eigenschaft wird entweder als das Schlüsselwort auto oder als ein <integer> angegeben.

Werte

auto: Das Element erstellt keinen neuen lokalen Stacking-Kontext. Die Stapelreihenfolge des generierten Elements im aktuellen Stacking-Kontext ist 0.
<integer>: Dieses <integer> ist die Stapelreihenfolge des generierten Elements im aktuellen Stacking-Kontext. Das Element erstellt auch einen lokalen Stacking-Kontext. Das bedeutet, dass die z-indexe der Nachkommen nicht mit den z-indexen von Elementen außerhalb dieses Elements verglichen werden.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	positionierte Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Integer
Erstellt Stapelkontext	Ja

Formale Syntax

z-index = 
 auto | 
 <integer> | 
 inherit

Beispiele

Visuelles Schichten von Elementen

HTML

html

<div class="wrapper">
 <div class="dashed-box">Dashed box</div>
 <div class="gold-box">Gold box</div>
 <div class="green-box">Green box</div>
</div>

CSS

css

.wrapper {
 position: relative;
}
.dashed-box {
 position: relative;
 z-index: 1;
 border: dashed;
 height: 8em;
 margin-bottom: 1em;
 margin-top: 2em;
}
.gold-box {
 position: absolute;
 z-index: 3; /* put .gold-box above .green-box and .dashed-box */
 background: gold;
 width: 80%;
 left: 60px;
 top: 3em;
}
.green-box {
 position: absolute;
 z-index: 2; /* put .green-box above .dashed-box */
 background: lightgreen;
 width: 20%;
 left: 65%;
 top: -25px;
 height: 7em;
 opacity: 0.9;
}

Ergebnis

[フレーム]

Spezifikationen

Specification
Cascading Style Sheets Level 2 # z-index

Browser-Kompatibilität

Siehe auch

CSS position Eigenschaft
Verständnis von CSS z-index

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden