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-Reihenfolge eines positionierten Elements und seiner Nachfahren oder Flex- und Grid-Elemente fest. Überlappende Elemente mit einem größeren z-index überdecken diejenigen 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 Feld (also eines mit einer position, die nicht static ist) gibt die z-index Eigenschaft Folgendes an:
- Die Stapel-Ebene des Feldes im aktuellen Stacking-Kontext.
- Ob das Feld einen lokalen Stacking-Kontext erstellt.
Syntax
/* 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 <integer> angegeben.
Werte
auto-
Das Feld erstellt keinen neuen lokalen Stacking-Kontext. Die Stapel-Ebene des generierten Feldes im aktuellen Stacking-Kontext ist
0. <integer>-
Dieses
<integer>ist die Stapel-Ebene des generierten Feldes im aktuellen Stacking-Kontext. Das Feld erstellt auch einen lokalen Stacking-Kontext. Dies bedeutet, dass die z-indexe der Nachfahren nicht mit den z-indexen der Elemente 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
Elemente visuell schichten
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
.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
positionEigenschaft - Verständnis von CSS z-indexes