initial commit

1 files changed, 192 insertions, 0 deletions

diff --git a/files/it/web/css/z-index/index.html b/files/it/web/css/z-index/index.html
new file mode 100644
index 0000000000..7f58297a34
--- /dev/null
+++ b/files/it/web/css/z-index/index.html
@@ -0,0 +1,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;
+
+/* &lt;integer&gt; 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">&lt;div class="container"&gt;
+&lt;div class="block position1 text-top"&gt;z-index: auto&lt;/div&gt;
+&lt;div class="block position2 text-top"&gt;z-index: auto&lt;/div&gt;
+&lt;div class="block position3 text-top"&gt;z-index: auto&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container"&gt;
+&lt;div class="block position1 text-bottom" style="z-index:3"&gt;z-index: 3&lt;/div&gt;
+&lt;div class="block position2 text-bottom" style="z-index:2"&gt;z-index: 2&lt;/div&gt;
+&lt;div class="block position3 text-bottom" style="z-index:1"&gt;z-index: 1&lt;/div&gt;
+&lt;/div&gt;</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/">&lt;integer&gt;</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="&lt;integer>" name="&lt;integer>"><code>&lt;integer&gt;</code></a></dt>
+ <dd>Questo {{cssxref("&lt;integer&gt;")}} 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">&lt;div class="dashed-box"&gt;Dashed box
+  &lt;span class="gold-box"&gt;Gold box&lt;/span&gt;
+  &lt;span class="green-box"&gt;Green box&lt;/span&gt;
+&lt;/div&gt;
+</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>