--- title: z-index slug: Web/CSS/z-index translation_of: Web/CSS/z-index ---

La Proprietà CSS z-index specifica lo z-order di un elemento posizionato 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.

/* 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 valore qualsiasi di position che non sia static) la proprietà z-index indica;

Il livello di sovrapposizione della box nello stacking context corrente.
Se la box stabilisce uno stacking context locale.

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

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

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