Propriété CSS z-index

La propriété CSS z-index contrôle l'ordre d'empilement des éléments qui se chevauchent — lequel apparaît devant et lequel est caché derrière. Son nom vient de l'axe z imaginaire : l'axe x va de gauche à droite, l'axe y de haut en bas, et l'axe z pointe hors de l'écran vers vous. Un élément avec un z-index plus élevé se rapproche du spectateur et recouvre les éléments ayant une valeur inférieure.

Cette page explique ce que fait z-index, pourquoi il ne fonctionne que sur les éléments positionnés, comment les contextes d'empilement décident quelles valeurs sont comparées, et les raisons les plus courantes pour lesquelles un z-index « ne fonctionne pas ».

Fonctionnement de l'empilement

Par défaut, lorsque des éléments se chevauchent, celui qui apparaît plus tard dans la source HTML est peint au-dessus. z-index vous permet de remplacer cet ordre explicitement. Par exemple, z-index: 10 sera au-dessus de z-index: 1, quelle que soit l'ordre dans la source, et des valeurs négatives comme z-index: -1 poussent un élément derrière son parent.

Mais z-index n'est pas un classement global. Les valeurs ne sont comparées qu'au sein du même contexte d'empilement. Un contexte d'empilement est une couche autonome : chaque élément à l'intérieur est empilé par rapport à ses frères et sœurs, et l'ensemble du groupe est ensuite empilé comme une unité dans son contexte parent. La racine de la page (<html>) crée le premier contexte d'empilement, et certaines propriétés en créent de nouveaux (voir ci-dessous).

Info

La propriété z-index n'a aucun effet sur les éléments static (valeur par défaut). Elle s'applique uniquement aux éléments positionnés — ceux dont la propriété position est définie sur relative, absolute, fixed ou sticky — ainsi qu'aux éléments flex/grid.

Valeur initiale	auto
S'applique à	Éléments positionnés.
Héritée	Non.
Animatable	Oui.
Version	CSS2
Syntaxe DOM	object.style.zIndex = "-1";

Syntaxe

Syntaxe de la propriété CSS z-index

z-index: auto | number | initial | inherit;

Exemple de la propriété z-index avec une valeur négative :

Exemple de la propriété CSS z-index avec une valeur négative

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 0;
        top: 10px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="200" height="100" />
  </body>
</html>

Essayez vous-même »

Exemple de la propriété z-index avec une valeur positive :

Exemple de la propriété CSS z-index avec une valeur numérique

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue,
      #green,
      #grey {
        position: absolute;
        width: 150px;
        height: 150px;
        color: #eee;
        opacity: 0.95;
        padding: 15px;
        line-height: 100px;
        text-align: center;
      }
      #blue {
        z-index: 1;
        background-color: #1c87c9;
        top: 60px;
        left: 50px;
        line-height: 1;
      }
      .black {
        height: 80px;
        width: 160px;
        background-color: #000;
        line-height: 100px;
        bottom: 20px;
        position: absolute;
        z-index: 10;
      }
      #green {
        z-index: 2;
        background-color: #8ebf42;
        top: 100px;
        left: 170px;
      }
      #grey {
        background-color: #666;
        top: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <div class="container">
      <div id="blue">
        Blue
        <div class="black">Black</div>
      </div>
      <div id="green">Green</div>
      <div id="grey">Grey</div>
    </div>
  </body>
</html>

Essayez vous-même »

Ici, les boîtes se chevauchent car elles sont toutes positionnées en absolu. La boîte bleue (z-index: 1) se situe en dessous de la boîte verte (z-index: 2), et la boîte grise n'a pas de z-index, elle suit donc l'ordre dans la source. Notez que la boîte noire (z-index: 10) est imbriquée à l'intérieur de la boîte bleue : son z-index: 10 n'est comparé qu'aux autres enfants de bleue, elle ne peut donc pas s'élever au-dessus de la boîte verte même si 10 > 2. C'est la règle du contexte d'empilement en action.

Résultat

Valeurs

Valeur	Description	Essayer
auto	Le niveau d'empilement de la boîte générée est égal à celui de son parent. C'est la valeur par défaut de cette propriété.	Essayer »
number	Le niveau d'empilement de la boîte générée est spécifié par des nombres. Les valeurs négatives sont valides.	Essayer »
initial	La propriété utilise sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Ce qui crée un nouveau contexte d'empilement

Comprendre les contextes d'empilement est la clé pour maîtriser z-index. Un nouveau contexte est créé, entre autres, par :

L'élément racine <html>.
Un élément positionné (relative, absolute, fixed, sticky) avec un z-index différent de auto.
Un enfant flex ou grid avec un z-index différent de auto.
Un élément avec une valeur opacity inférieure à 1 (voir opacity).
Un élément avec une valeur transform, filter, perspective, clip-path ou mask différente de none (voir transform).
Un élément avec position: fixed ou position: sticky.
Un élément avec isolation: isolate.
Un élément avec will-change défini sur une propriété qui créerait un contexte.

Une fois qu'un élément forme un contexte d'empilement, le z-index de ses descendants est « piégé » à l'intérieur — ils ne peuvent jamais s'en échapper pour rivaliser avec des éléments extérieurs au parent.

Pourquoi votre z-index « ne fonctionne pas »

Voici les causes les plus fréquentes, par ordre de fréquence :

L'élément est static. z-index est silencieusement ignoré sauf si position est relative, absolute, fixed ou sticky (ou si l'élément est un élément flex/grid). Définissez d'abord une position.
Un parent forme un contexte d'empilement. Une modale avec z-index: 9999 peut tout de même se retrouver cachée derrière un autre élément si son ancêtre se trouve dans un contexte d'empilement plus bas. La solution consiste à augmenter le z-index de l'ancêtre, pas du descendant.
Un ancêtre a opacity ou transform. Même un opacity: 0.99 anodin ou un transform: translateZ(0) (souvent ajouté pour « l'accélération GPU ») crée un contexte d'empilement et peut piéger les enfants.
Vous luttez contre l'ordre dans la source. Sans z-index, les éléments placés plus tard l'emportent. Réorganiser le HTML est parfois plus simple qu'une surenchère de z-index.

Avertissement

Évitez les grands « nombres magiques » comme z-index: 999999. Ils rendent l'ordre d'empilement impossible à comprendre. Gardez une échelle réduite et documentée (par exemple 1, 10, 100, 1000 pour le contenu, les menus déroulants, les barres fixes et les modales).

Exemple : isolation d'un contexte d'empilement

La propriété isolation: isolate crée un nouveau contexte d'empilement sans modifier le positionnement ni l'opacité. C'est la manière la plus propre de contenir les valeurs z-index d'un composant :

.card {
  /* z-index values inside .card now stay inside .card */
  isolation: isolate;
}

Propriétés associées

position — requis pour que z-index prenne effet.
opacity — les valeurs inférieures à 1 créent un contexte d'empilement.
transform — les valeurs différentes de none créent un contexte d'empilement.

Pratique

Que fait la propriété 'z-index' en CSS ?

Elle permet aux éléments de se chevaucher en contrôlant la manière dont ils s'empilent.Elle change la couleur d'un élément.Elle détermine l'ordre d'empilement des éléments positionnés.Elle modifie la taille d'un élément.Elle n'est effective que sur les éléments positionnés.Elle manipule le style de bordure d'un élément.