z-index

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété CSS z-index définit l'ordre d'empilement sur l'axe Z d'un élément positionné et de ses descendants ou des éléments flexibles et de grille. Les éléments qui se chevauchent avec un z-index plus élevé recouvrent ceux avec un z-index plus faible.

Exemple interactif

z-index: auto;

z-index: 1;

z-index: 3;

z-index: 5;

z-index: 7;

<section class="default-example container" id="default-example">
  <div id="example-element">Changez mon z-index</div>
  <div class="block blue position1">z-index: 6</div>
  <div class="block blue position2">z-index: 4</div>
  <div class="block blue position3">z-index: 2</div>
  <div class="block red position4">z-index: auto</div>
  <div class="block red position5">z-index: auto</div>
  <div class="block red position6">z-index: auto</div>
</section>

#example-element {
  top: 15px;
  left: 15px;
  width: 180px;
  height: 230px;
  position: absolute;
  /* centrer le texte pour qu'il soit visible même lorsque z-index est
     défini sur auto */
  line-height: 215px;
  font-family: monospace;
  background-color: #fcfbe5;
  border: solid 5px #e3e0a1;
  z-index: auto;
  color: black;
}

.container {
  display: inline-block;
  width: 250px;
  position: relative;
}

.block {
  width: 150px;
  height: 50px;
  position: absolute;
  font-family: monospace;
  color: black;
}

.blue {
  background-color: #e5e8fc;
  border: solid 5px #112382;
  /* déplacer le texte en bas de la boîte */
  line-height: 55px;
}

.red {
  background-color: #fce5e7;
  border: solid 5px #e3a1a7;
}

.position1 {
  top: 0;
  left: 0;
  z-index: 6;
}

.position2 {
  top: 30px;
  left: 30px;
  z-index: 4;
}

.position3 {
  top: 60px;
  left: 60px;
  z-index: 2;
}

.position4 {
  top: 150px;
  left: 0;
  z-index: auto;
}

.position5 {
  top: 180px;
  left: 30px;
  z-index: auto;
}

.position6 {
  top: 210px;
  left: 60px;
  z-index: auto;
}

Pour les boîtes positionnées (celles pour lesquelles position est différent de static), 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.

Syntaxe

css

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

/* Valeur de type <integer> */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Valeurs négatives possibles pour indiquer une priorité inférieure */

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

La propriété z-index est spécifiée soit par le mot-clé auto, soit par un entier (<integer>).

Valeurs

auto: La boîte ne crée pas de nouveau contexte d'empilement local. Le niveau d'empilement de la boîte générée dans le contexte d'empilement courant est 0.
<integer>: Cet entier (<integer>) est le niveau d'empilement de la boîte générée dans le contexte d'empilement courant. La boîte crée également un contexte d'empilement local. Cela signifie que les z-index des descendants ne sont pas comparés aux z-index des éléments en dehors de cet élément.

Définition formelle

Valeur initiale	`auto`
Applicabilité	éléments positionnés
Héritée	non
Valeur calculée	comme défini
Type d'animation	un entier
Crée un contexte d'empilement	oui

Syntaxe formelle

z-index = 
  auto       |
  <integer>  |
  inherit    

<integer> = 
  <number-token>

Exemples

Empiler des éléments visuellement

HTML

html

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

CSS

css

.wrapper {
  position: relative;
}

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

Résultat

Spécifications

Spécification
Cascading Style Sheets Level 2 # z-index

Compatibilité des navigateurs

Voir aussi

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

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 6 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu