z index - CSS - La propriété z-index

CSS – La propriété z-index

Qu’est-ce que la balise z-index ?

En CSS, la propriété z-index permet de définir l’ordre de priorité de certains éléments d’une page par rapport à l’axe vertical de celle-ci. Concrètement, elle permet d’indiquer, par exemple, que pour 2 éléments .img et .content-box partiellement ou totalement superposés, .img sera placé au dessus de .content-box.

Comme ceci :

L’élément img-class a une valeur de z-index plus élevée que celle de content-box, il viendra donc se positionner au-dessus.

 

Propriétés et application concrète

L’utilisation de cette propriété est soumise à quelques règles et conditions.

D’une part, il faut définir l’attribut position de chaque élément avant de pouvoir lui appliquer un z-index . Il faut ainsi lui attribuer une valeur de position relative, absolute ou fixed. En effet, z-index ne fonctionne pas sur les élements de position static (la valeur par défaut de l’attribut positionsi celui-ci n’est pas défini).

D’autre part, bien que l’élément à la valeur la plus élevée soit toujours prioritaire sur l’élément ayant une valeur inférieure, n’oubliez pas de prendre en compte la valeur de l’attribut position définie au préalable sur vos différents éléments. Il est important de prêter attention à ce détail si vous ne voulez pas avoir de surprise dans votre mise en page en empilant 2 éléments de valeur position différente.

Voici un exemple simple de mise en application :

Le résultat se traduira de la manière suivante :

  • .footer-right sera au premier plan.
  • .img-box arrivera en seconde position malgré son faible z-index, il viendra donc se placer juste en dessous de footer-right.
  • .content-box se placera bon dernier de la pile, malgré le fait qu’il possède le plus haut z-index, parce que sa position n’est pas définie.
  • .share-icon aurait dû être au premier plan, mais ici, puisque l’élément précédent n’a pas de position définie et que lui-même a pour valeur de positionnement relative, il sera repoussé vers le bas.

On a donc là l’exemple d’une très mauvaise utilisation de la propriété z-index 🙂

A vous de faire mieux !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *