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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
---
title: z-index
slug: Web/CSS/z-index
translation_of: Web/CSS/z-index
---
<div>{{CSSRef}}</div>
<div>La Proprietà CSS <strong><code>z-index</code> </strong>specifica lo z-order di un elemento <a href="/it/docs/Web/CSS/position">posizionato</a> e dei suoi discendenti. Nel caso di elementi che si sovrappongono, quelli con un valore di z-order maggiore sono sovrapposti a quelli con un valore più basso.</div>
<div></div>
<pre class="brush:css no-line-numbers notranslate">/* 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: unset;
</pre>
<p>Per una box posizionata (ovvero con valore qualsiasi di <code>position</code> che non sia <code>static</code>) la proprietà <code>z-index</code> indica;</p>
<ol>
<li> Il livello di sovrapposizione della box nello <a href="/en-US/docs/Glossary/Stacking_context">stacking context </a>corrente.</li>
<li> Se la box stabilisce uno <a href="/en-US/docs/Glossary/Stacking_context">stacking context </a>locale.</li>
</ol>
<pre class="brush: html notranslate"><div class="container">
<div class="block position1 text-top">z-index: auto</div>
<div class="block position2 text-top">z-index: auto</div>
<div class="block position3 text-top">z-index: auto</div>
</div>
<div class="container">
<div class="block position1 text-bottom" style="z-index:3">z-index: 3</div>
<div class="block position2 text-bottom" style="z-index:2">z-index: 2</div>
<div class="block position3 text-bottom" style="z-index:1">z-index: 1</div>
</div></pre>
<div id="z-index">
<pre class="brush: css notranslate">* {
box-sizing: border-box;
}
.container {
display: inline-block;
width: 250px;
position: relative;
}
.block {
width: 150px;
height: 75px;
position: absolute;
font-family: monospace;
background-color: #E5E8FC;
border: solid 5px #112382;
}
.text-top {
padding: 0.5em 0 5em .5em;
}
.text-bottom {
padding: 4em 0 1.5em .5em;
}
.position1 {
top: 0;
left: 0;
}
.position2 {
top: 30px;
left: 30px;
}
.position3 {
top: 60px;
left: 60px;
}</pre>
</div>
<p>{{EmbedLiveSample("z-index", 1200, 160, "", "", "example-outcome-frame")}}</p>
<p>L'esempio sopra mostra l'effetto di z-index. Sulla sinistra abbiamo disegnato tre boxes, facendole sovrapporre usando <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning">absolute positioning. </a>Per default, gli elementi sono sovrapposti seguendo l'ordine dichiarato nel codice HTML. Sulla destra abbiamo lo stesso markup, ma a differenza dell'ordine di default usiamo lo <code>z-index</code>. </p>
<p>{{cssinfo}}</p>
<h2 id="Sintassi">Sintassi</h2>
<p>La proprieta <code>z-index</code> e' specificata anche con le chiavi <code><a href="/en-US/docs/">auto</a></code> o <code><a href="/en-US/docs/"><integer></a></code>.</p>
<h3 id="Valori">Valori</h3>
<dl>
<dt><a id="auto" name="auto"><code>auto</code></a></dt>
<dd>La box non stabilisce una nuova stacking context locale. Il livello di sovrapposizione della box generata e' lo stesso del livello di sovrapposizione del suo genitore</dd>
<dt><a id="<integer>" name="<integer>"><code><integer></code></a></dt>
<dd>Questo {{cssxref("<integer>")}} e' il livello di sovrapposizione della box generata nel corrente stacking context. La box stabilisce anche una locale stacking context in cui il suo livello di sovrapposizione e' <code>0</code>. Questo significa che gli z-indexes dei discendenti non sono confrontati con gli z-indexes degli elementi all'esterno di questo elemento.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Examples">Examples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight:[3,11,19] notranslate">.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>
<h3 id="Result"><strong>Result</strong></h3>
<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Defines <code>z-index</code> as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.z-index")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>CSS {{Cssxref("position")}} property</li>
<li><a href="/en-US/docs/CSS/Understanding_z-index">Understanding CSS z-indexes</a></li>
</ul>
|
