Chapitre 130 | Z-index

Z-index

Le z-index est une propriété CSS qui permet de gérer l’ordre d’empilement des éléments. Un élément avec une valeur de z-index plus élevée apparaîtra « au-dessus » d’un élément avec une valeur plus basse.

Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications et à l’exercice.

Explications

1. Positionnement nécessaire : Pour que z-index fonctionne, l’élément doit avoir une propriété de positionnement (position: relative, absolute ou fixed). [sujet du chapitre suivant]
2. Ordre d’empilement :
   • L’élément bleu (.element-bas) a un z-index: 1 et se trouve en bas.
   • L’élément rouge (.element-dessus) a un z-index: 2 et apparaît au-dessus.

Dans cet exemple, le carré rouge chevauche le carré bleu. Vous pouvez ajuster les valeurs de z-index pour inverser l’ordre.

Exercice

Modifier les valeurs pour que l’élément bleu passe au dessus de l’élément rouge.