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
151
152
153
154
155
156
157
158
159
|
---
title: Stapeln mit z-index
slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
tags:
- CSS
- Referenz
- z-index
translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
---
<div>{{cssref}}</div>
<p>Im ersten Teil dieses Artikels, <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft</a> <code>z-index</code>, wird erklärt, wie die Stapelung standardmäßig angeordnet wird. Wenn Sie eine benutzerdefinierte Stapelreihenfolge erstellen möchten, können Sie die Eigenzschaft {{cssxref("z-index")}} bei einem <a href="/de/docs/Web/CSS/position#Types_of_positioning">positionierten</a> Element verwenden.</p>
<p>Die Eigenschaft <code>z-index</code> kann mit einem ganzzahligen Wert (positiv, null oder negativ) angegeben werden, der die Position des Elements entlang der z-Achse darstellt. Wenn Sie mit der z-Achse nicht vertraut sind, stellen Sie sich die Seite als einen Stapel von Ebenen vor, von denen jede eine Nummer hat. Die Ebenen werden in numerischer Reihenfolge gerendert, wobei größere Zahlen über kleineren Zahlen stehen.</p>
<ul>
<li>unterste Schicht (am weitesten vom Beobachter entfernt)</li>
<li>...</li>
<li>Schicht -3</li>
<li>Schicht -2</li>
<li>Schicht -1</li>
<li>Schicht 0 <em>(Standard-Renderingschicht)</em></li>
<li>Schicht 1</li>
<li>Schicht 2</li>
<li>Schicht 3</li>
<li>...</li>
<li>oberste Schicht <em>(am nähesten zum Beobachter liegend)</em></li>
</ul>
<div class="note">
<ul>
<li>Wenn keine Eigenschaft <code>z-index</code> angegeben ist, werden Elemente auf der Standard-Rendering-Ebene 0 (Null) gerendert.</li>
<li>Wenn mehrere Elemente denselben <code>z-index</code> Wert haben (d. h. sie werden auf derselben Ebene platziert), gelten die im Abschnitt <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne z-Index-Eigenschaft</a> erläuterten Stapelungsregeln.</li>
</ul>
</div>
<p>Im folgenden Beispiel wird die Stapelreihenfolge der Ebenen mithilfe des <code>z-index</code> neu angeordnet. Der <code>z-index</code> von Element Nr. 5 hat keine Auswirkung, da es sich nicht um ein positioniertes Element handelt.</p>
<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/912/=Understanding_zindex_03.png"></p>
<h2 id="Beispiel">Beispiel</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div id="abs1">
<b>DIV #1</b>
<br />position: absolute;
<br />z-index: 5;
</div>
<div id="rel1">
<b>DIV #2</b>
<br />position: relative;
<br />z-index: 3;
</div>
<div id="rel2">
<b>DIV #3</b>
<br />position: relative;
<br />z-index: 2;
</div>
<div id="abs2">
<b>DIV #4</b>
<br />position: absolute;
<br />z-index: 1;
</div>
<div id="sta1">
<b>DIV #5</b>
<br />no positioning
<br />z-index: 8;
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">div {
padding: 10px;
opacity: 0.7;
text-align: center;
}
b {
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;
}
</pre>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li>
<li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken</a>: Wie fließende (<code>float</code>) Elemente beim Stapeln behandelt werden.</li>
<li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li>
<li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li>
<li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li>
<li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3</a>: 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li>
</ul>
<div class="originaldocinfo">
<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
<ul>
<li>Author(s): Paolo Lombardi</li>
<li>This article is the English translation of an article I wrote in Italian for <a class="external external-icon" href="http://www.yappy.it" rel="noopener">YappY</a>. I grant the right to share all the content under the <a class="external external-icon" href="http://creativecommons.org/licenses/by-sa/2.0/" rel="noopener">Creative Commons: Attribution-Sharealike license</a>.</li>
<li>Last Updated Date: November 3, 2014</li>
</ul>
</div>
|
