La propriété z-index définit le « z-order » (NdT : « ordre z » n'est pas usité) d'un élément positionné et de ses éléments fils ou de ses éléments flexibles (les enfants d'un élément avec display: flex). 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 (celles pour lesquelles position est différent de static), 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.

L'exemple ci-avant illustre l'impact de z-index. À gauche, on a dessiné trois boîtes qui se chevauchent avec un positionnement absolu. Par défaut, les éléments sont empilés dans l'ordre dans lequel ils sont déclarés dans le document HTML. À droite, on présente le même document mais l'ordre des couches a été inversé grâce à z-index.

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;

La propriété z-index se définit grâce au mot-clé auto ou grâce à une valeur entière (<integer>).

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 (type <integer>) 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 État 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

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 4Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Negative valuesChrome Support complet 1Edge Support complet 12Firefox Support complet 3IE Support complet 4Opera Support complet 4Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

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,