z-index

La propriété z-index définit le « z-order » (NdT : « ordre z » n'est pas usité) d'un élément et de ses éléments fils. Lorsque des éléments se chevauchent, le z-order détermine l'ordre des différentes couches que formeront les éléments. Généralement, un élément couvrira un autre élément si sa valeur de z-index est supérieure à celle du deuxième élément.

Pour les boîtes positionnées, la propriété z-index définit :

Le niveau de la boîte dans la pile par rapport au contexte d'empilement courant
Si la boîte crée un contexte d'empilement local.

Valeur initiale	`auto`
Applicabilité	éléments positionnés
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Animable	oui, comme un entier
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle
Crée un contexte d'empilement	oui

Syntaxe

/* Avec un mot-clé */
z-index: auto;

/* valeurs entières */
/* type <integer> */
z-index: 0;
z-index: 3;
z-index: 289;
  /* On peut avoir des
   valeurs négatives pour
   réduire la propriété */
z-index: -1; 

/* Valeurs globales */
z-index: inherit;
z-index: initial;
z-index: unset;

Valeurs

auto: La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.
<integer>: L'entier fourni sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est 0. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.

Syntaxe formelle

auto | <integer>

Exemple

HTML

<div class="boite-tirets">Boîte tirets
  <span class="boite-doree">Boîte dorée</span>
  <span class="boite-verte">Boîte verte</span>
</div>

CSS

.boite-tirets { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.boite-doree { 
  position: absolute;
  z-index: 3; /* .boite-doree sera au-dessus de .boite-verte et .boite-tirets */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.boite-verte { 
  position: absolute;
  z-index: 2; /* .boite-verte sera au-dessus de .boite-tirets */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

Résultat

Spécifications

Spécification	Statut	Commentaires
CSS Transitions La définition de 'Comportement de z-index pour l'animation' dans cette spécification.	Version de travail	Définit `z-index` comme pouvant être animé.
CSS Level 2 (Revision 1) La définition de 'z-index' dans cette spécification.	Recommendation	Définition initiale

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple	1.0	1.0 (1.7 ou moins)	4.0	4.0	1.0
Gestion des valeurs négatives (apporté avec CSS2.1, non autorisé par la spécification CSS2, obsolète)	1.0	3.0 (1.9)	4.0	4.0	1.0

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Support simple	?	?	?	?	?
Gestion des valeurs négatives (apporté avec CSS2.1, non autorisé par la spécification CSS2, obsolète)	?	?	?	?	?

Voir aussi

La propriété CSS position
Comprendre le fonctionnement de z-index