Questa pagina contiene un errore di script. Nell’attesa che venga corretto dagli editori del sito, è possibile visualizzare qui di seguito una versione provvisoria dei contenuti.

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

{{CSSRef}}
La Proprieta' CSS z-index specifica lo z-order della posizione di un elemento e dei suoi discendenti. 
Quando degli elementi sono sovrapposti, z-oredr determina quale di questi elementi si sovrappone agli altri. Un elemento con un maggiore z-order generalmente copre un elemento con z-order minore. 
 
/* 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;

Per una box posizionata (ovvero con una qualsiasi position tranne che static) la z-index specifica che:

  1.  Il livello si sovrapposizione della box nel corrente stacking context.
  2.  Se la box stabilisce un locale stacking context.  
<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>

 

* {
  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;
}

{{EmbedLiveSample("z-index", 1200, 160, "", "", "example-outcome-frame")}}

L'esempio sopra mostra l'effetto di z-index. Sulla sinistra abbiamo disegnato tre boxes, facendole sovrapporre usando absolute positioning. 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 z-index

{{cssinfo}}

Sintassi

La proprieta z-index e' specificata anche con le chiavi auto o <integer>.

Valori

auto
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
<integer>
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' 0. Questo significa che gli z-indexes dei discendenti non sono confrontati con gli z-indexes degli elementi all'esterno di questo elemento.

Formal syntax

{{csssyntax}}

Examples

HTML

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

CSS

.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;
}

Result

{{ EmbedLiveSample('Examples', '550', '200', '') }}

Specifications

Specification Status Comment
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}} {{Spec2('CSS3 Transitions')}} Defines z-index as animatable.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}} {{Spec2('CSS2.1')}} Initial definition

Browser compatibility

{{Compat("css.properties.z-index")}}

See also

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: tallaGitHub
Ultima modifica di: tallaGitHub,