z-index

La Proprietà CSS z-index specifica lo z-order di un elemento posizionato (en-US) 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;

  1.  Il livello di sovrapposizione della box nello stacking context corrente.
  2.  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;
}

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

Initial value (en-US)auto
Applies topositioned elements
Inherited (en-US)no
Computed value (en-US)as specified
Animation typean integer
Creates stacking contextyes

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 <integer> (en-US) 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

auto | (en-US) <integer> (en-US)

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
CSS Transitions
The definition of 'animation behavior for z-index' in that specification.
Working Draft Defines z-index as animatable.
CSS Level 2 (Revision 1)
The definition of 'z-index' in that specification.
Recommendation Initial definition

Browser compatibility

BCD tables only load in the browser

See also