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 :

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

Valeur initialeauto
Applicabilitééléments positionnés
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animableoui, comme un entier
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle
Crée un contexte d'empilementoui

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

Compatibilité des navigateurs

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

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, tregagnon, Fredchat, Kyodev, Lapinkiller
 Dernière mise à jour par : SphinxKnight,