Propriété CSS z-index

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>

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>

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.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 4.0+


Trouvez-vous cela utile?

Articles Associées