z-index CSS propriété

Définition de la CSS z-index.

z-index CSS est propriété qui permet de spécifier la position d'empilement (notion de profondeur) d'un élément positionné par rapport aux autres éléments positionnés à l'intérieur du même contexte d'empilement. On pourrait schématiser en disant que, z-index est la position sur l'axe Z dans un espace 3D.

.identifiant{
  z-index : 10;
  position : relative;
}

La propriété de feuille de style z-index CSS peut prendre la valeur de position :

• auto : l'élément se verra attribuer une position "z-index" plus grande que l'élément précédent déclaré dans le code HTML si ce dernier à un z-index à auto. Valeur par défaut.
• 0 à +00 : nombre positif. L'élément ayant la plus grande valeur de z-index est au-dessus.
• inherit : hérite de la position z-index de son parent (CSS2)

Exemple de code z-index CSS

Conditions d'application de la CSS z-index.

La propriété CSS z-index est applicable sur toutes les balises HTML ou XHTML dont la valeur de la CSS position n'est pas égale à static.

Problème d'interprétation de z-index en Css.

La propriété z-index CSS peut poser des problèmes sur les navigateurs anciens : netscape <6, Internet Explorer <5, ...

Conditions d'animation de z-index en CSS3.

La propriété CSS z-index peut être animée si sa valeur est un nombre.

La CSS z-index est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.