Attribut z-index CSS

Définition et utilisation

L'attribut zIndex définit l'ordre de superposition des éléments. Les éléments avec un ordre de superposition plus élevé sont toujours placés devant ceux avec un ordre de superposition plus bas.

Remarque :Les éléments peuvent avoir une valeur de z-index négative.

Remarque :Z-index ne fonctionne que sur les éléments positionnés (par exemple, position:absolute;)

Explication

Cette propriété définit la position de l'élément en trois dimensions le long de l'axe z, où l'axe z est défini comme l'axe vertical s'étendant jusqu'à la zone d'affichage. Si c'est un nombre positif, cela signifie qu'il est plus proche de l'utilisateur, et si c'est un nombre négatif, cela signifie qu'il est plus loin de l'utilisateur.

Voir également :

Tutoriel CSS :Positionnement CSS

Manuel de référence HTML DOM :Attribut zIndex

Exemple

Définir le z-index de l'image :

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

Essayez-le vous-même

Syntaxe CSS

z-index: auto|number|initial|hériter;

Valeur de l'attribut

Valeur Description
auto Par défaut. L'ordre de superposition est égal à celui de l'élément parent.
number Définit l'ordre de superposition des éléments.
hériter Définit que la valeur de l'attribut z-index doit être héritée de l'élément parent.

Détails techniques

Valeur par défaut : auto
Héritabilité : non
Version : CSS2
Syntaxe JavaScript : object.style.zIndex="1"

Plus d'exemples

Z-index
Z-index peut être utilisé pour placer un élément après un autre.
Z-index
L'élément de l'exemple précédent a changé le Z-index.

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0