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

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

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 valueauto
Applies topositioned elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typean integer
Canonical orderthe unique non-ambiguous order defined by the formal grammar
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> 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 | <integer>

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
z-indexChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 4Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
Negative valuesChrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 4Opera Full support 4Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes

Legend

Full support  
Full support

See also

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: duduindo, mdnwebdocs-bot, tallaGitHub
Ultima modifica di: duduindo,