Propriété CSS z-index

❮ Précédent Suivant ❯

La propriété CSS z-index spécifie le "z-order" d'un élément et de ses filles ou des éléments flexibles. "Z-order" est l'ordre de l'élément sur l'axe-z (z-axis).

La z-index d'un élément spécifie son ordre à l'intérieur du contexte d'empilement. Un contexte d'empilement est un groupe des éléments qui ont un parent commun.

L'élément qui a l'ordre de pile le plus grand est devant l'élément avec un ordre de pile inférieur.

La propriété z-index n'a effet que sur les éléments positionnés.

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

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      position: absolute;
      left: 0;
      top: 10px;
      z-index: -1;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété z-index</h2>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="200" height="100">
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la propriété z-index:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété z-index</h2>
    <div class="container">
      <div id="blue">
        Bleu
        <div class="black">Noir</div>
      </div>
      <div id="green">Vert</div>
      <div id="grey">Gris</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Le niveau d'empilement de la boîte générée est égal à ses parents. C'est la valeur initiale de cette propriété.
number	Le niveau de l'empilement de la boîte générée spécifié par nombres. Valeurs négatives sont valides.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.