diff options
Diffstat (limited to 'files/it/web/css/z-index/index.html')
| -rw-r--r-- | files/it/web/css/z-index/index.html | 192 |
1 files changed, 0 insertions, 192 deletions
diff --git a/files/it/web/css/z-index/index.html b/files/it/web/css/z-index/index.html deleted file mode 100644 index ce15d46e40..0000000000 --- a/files/it/web/css/z-index/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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> |