À quoi sert la propriété CSS z-index ? Et comment l’utiliser ?

Dans toute création graphique, nous sommes susceptibles de rencontrer des mises en page jouant sur la superposition des éléments, ce qui entraîne une notion de disposition avant/arrière plan.

Sur un logiciel de création graphique, il nous suffit de jouer sur l’ordre des calques pour changer la disposition des éléments. Heureusement, en CSS, nous pouvons faire la même chose en utilisant la propriété z-index.

Mise en pratique

Nous allons prendre l’exemple de 2 div que nous allons styliser de façon à venir placer la 2ème (#dessous) sous la première (#dessus). Elles feront chacune 100px de côté.

<div id="dessus">over</div>
<div id="dessous">under</div>

On leur attribue également une couleur afin de les voir et de les différencier.

div {
  height:100px;
  width:100px;
}
#dessus {
  background-color:pink;
}
#dessous {
  background-color:cyan;
}

Pour l’instant, nous avons donc les 2 div l’une en dessous de l’autre. Créons un peu de superposition dans tout ça en jouant sur les marges de la 2ème afin de la faire remonter de 80px vers le haut, et la décaler un peu sur la droite de 20px.

#dessous {
  background-color:cyan;
  margin-top:-80px;
  margin-left:20px;
}

Nous avons donc désormais notre 2ème div qui est remontée mais qui se trouve par dessus la première. Or, c’est l’inverse que nous souhaitons !

Pour faire passer la div bleue derrière la rose, nous avons 2 possibilités :

1. faire passer la div rose en avant plan
2. faire passer la div bleue en arrière plan

Modifier l’ordre de disposition

Par défaut, tous les éléments sont en position 0 et apparaissent les uns au dessus des autres en fonction de leur ordre d’apparition dans la HTML. Ici, la div bleue est après la rose dans le HTML, et on voit bien qu’elle passe par dessus cette dernière. On va donc utiliser la propriété z-index pour changer cette disposition. Cette dernière attend un nombre entier comme valeur.

#dessus {
  background-color:pink;
  z-index:1;
  position:relative;
}

#dessous {
  background-color:cyan;
  margin-top:-80px;
  margin-left:20px;
  z-index:-1;
  position:relative;
}

Vous remarquerez que dans tous les cas, outre la propriété z-index, on retrouve également une autre propriété : position: relative.

Seuls les éléments positionnés peuvent avoir un z-index. Un élément positionné est un élément qui a une propriété CSS position: relative | absolute | fixed.

Au plus l’élément a un z-index élevé, au plus il sera placé en avant plan. Ainsi, un z-index:99 apparaîtra au dessus d’un z-index:58.

Et si on allait plus loin ?

Vous souhaitez aller plus loin en HTML / CSS et vous former sur ces langages ? Découvrez nos formations Développement web et UI-UX Design qui abordent chacune ces langages là !

Articles qui pourraient vous intéresser

Appliquer un filtre couleur sur une image en background en CSS

Créer un bouton avec un angle coupé

Créer un menu mobile avec CSS et JavaScript