files/de/web/css/z-index/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

---
title: z-index
slug: Web/CSS/z-index
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Positionierung
  - Referenz
translation_of: Web/CSS/z-index
---
<div>{{CSSRef}}</div>

<div>
<p>Die CSS-Eigenschaft <strong><code>z-index</code></strong> legt die z-Reihenfolge eines <a href="/de/docs/Web/CSS/position">positionierten</a> Elements und seiner Abkömmlinge oder Flex-Elemente fest. Überlappende Elemente mit einem größeren <code>z-index</code> überdecken diejenigen mit einem kleineren.</p>

<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>

<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>

<p>Für einen positionierte Box (d.h. eine mit einer <code>{{cssxref("position")}}</code> anders als <code>static</code>) ist für die Eigenschaft <code>z-index</code> spezifiert:</p>

<p>Für eine positionierte Box (d. h. eine mit einer anderen als der statischen Position) gibt die Eigenschaft <code>z-index</code> an:</p>

<ol>
 <li>Die Stapelebene der Box im aktuellen <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapel-Zusammenhang</a>.</li>
 <li>Ob die Box einen lokalen Stapel-Zusammenhang herstellt.</li>
</ol>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css notranslate">/* Schlüsselwortwert */
z-index: auto;

/* &lt;integer&gt; Werte */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative Werte, um die Priorität zu senken */

/* Globale Werte*/
z-index: inherit;
z-index: initial;
z-index: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>Die Box etabliert keinen neuen lokalen Stapelkontext. Die generierte Box befindet sich im aktuellen Stapelkontext auf gleicher Ebene wie dessen Elternbox. </dd>
 <dt><code>&lt;integer&gt;</code></dt>
 <dd>Der {{cssxref("integer")}} legt die Stapelebene des momentanen Stapelkontexts fest. Die Box etabliert zudem einen neuen Stapelkontext, dessen Stapelebene 0 ist. Dadurch werden die z-Indizes von Kinder-Elementen nicht mit z-Indizes außerhalb des Elements verglichen.</dd>
</dl>

<h2 id="Formale_Definition">Formale Definition</h2>

<p>{{cssinfo}}</p>

<h2 id="Formale_Syntax">Formale Syntax</h2>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Visually_layering_elements" name="Visually_layering_elements">Visuelle Schichtenelement</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
  &lt;div class="dashed-box"&gt;Dashed box&lt;/div&gt;
  &lt;div class="gold-box"&gt;Gold box&lt;/div&gt;
  &lt;div class="green-box"&gt;Green box&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css; notranslate">.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;
}
</pre>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{ EmbedLiveSample('Visually_layering_elements', '550', '200', '') }}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Definiert <code>z-index</code> als animierbar.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>

<p>{{Compat("css.properties.z-index")}}</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>CSS-Eigenschaft {{cssxref("position")}}</li>
 <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></li>
</ul>