La propriété z-index place les élements sur différents plans

Pour déterminer la superposition des éléments l'un sur l'autre dans une page, CSS dispose de z-index. Cependant il faut savoir certaines choses avant de l'utiliser. C'est une propriété simple dans son principe.

Les applications sont nombreuses: boites que l'on peut faire apparaître de façon dynamique, superposition des onglets, agrandir des images quand on passe la souris...

Syntaxe et principe

L'attribut z-index prend pour valeur un nombre entier positif ou négatif. Une valeur plus grande place un élément au-dessus des autres, quel que soit l'ordre d'affichage. Seule compte la valeur relative par rapport aux autres éléments.

Ainsi si une balise <div> a un z-index de 1, une autre sera affichée au-dessus et la cachera si elle a un z-index supérieur, qu'il soit de 2 ou de 10.

Syntaxe:

.blue
{
  position:absolute;
  z-index:1;
}

Exemple:

Le carré bleu a un z-index de 1, le rouge un z-index de 2 et le vert, un z-index de 3, il est donc affiché au-dessus des deux autres, cela même si on affiche d'abord le vert avant le rouge et le rouge avant le bleu.

On peut aussi changer dynamiquement la visibilité comme le montre la démonstration, avec une commande JavaScript.

Si le carré le carré rouge a l'id "red" et le carré vert l'id "green":

#red
{
  position:absolute;
  z-index: 2;

}
#green
{
  position:absolute;
  z-index: 3;
}

var r = document.getElementByid("red");
r.style.zIndex = 3;
var g = document.getElementById("green");
g.style.zIndex = 2;

On a maintenant le carré rouge au-dessus du vert:

Ce qu'il faut savoir

L'attribut z-index est effectif avec la position absolute, fixed ou relative. Il est inopérant avec l'attribut static par défaut. Il faut donc toujours définir l'attribut position.

Lorsqu'il n'est pas précisé, les éléments sont affichés selon l'ordre d'apparition, les derniers au-dessus des autres.

Quand le z-index à une valeur négative, l'objet est caché derrière le conteneur (dans la démo, un fieldset). Cela avec tous les navigateurs. On peut donc l'utiliser pour faire apparaître une lightbox dynamiquement.

Démonstration

Pour tester les valeurs de la propriété CSS z-index, sur différents navigateurs entrer des valeurs dans le formulaire ci-dessous, les champs correspondant aux figures de couleur bleue, rouge et verte.
Les figures ont la position: absolute et sont dans un fieldset qui a la position: relative.

Boite bleue Boite rouge Boite verte

Entrer les valeurs pour chaque boite et cliquer sur Envoyer.