En CSS, la propriété z-index est utilisée pour contrôler l'ordre d'empilement des éléments positionnés. Les éléments avec une valeur z-index supérieure seront positionnés devant les éléments avec une valeur z-index inférieure. Cette propriété est particulièrement utile lorsque des éléments se chevauchent sur une page Web et que vous souhaitez contrôler l'ordre dans lequel ils apparaissent.

Voici un aperçu de base de la façon d'utiliser la propriété z-index :

Syntaxe: 

 css
 selector {
  z-index: value;
}

Exemple: 

 HTML
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .element1 {
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: red;
      width: 100px;
      height: 100px;
      z-index: 2;
    }

    .element2 {
      position: absolute;
      top: 70px;
      left: 70px;
      background-color: blue;
      width: 100px;
      height: 100px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="element1"></div>
  <div class="element2"></div>
</body>
</html>

Dans cet exemple, nous avons deux éléments en position absolue ( element1 et element2 ). La propriété z-index est utilisée pour contrôler leur ordre d’empilement. La case rouge ( element1 ) a un z-index plus élevé que la case bleue ( element2 ), elle apparaîtra donc devant la case bleue.

Gardez à l’esprit quelques points clés :

  1. z-index ne fonctionne que sur les éléments positionnés (éléments avec une valeur position autre que static ).

  2. z-index valeurs peuvent être des entiers positifs et négatifs, voire même des nombres décimaux.

  3. Le contexte d'empilement est crucial lorsque l'on travaille avec z-index . Un élément avec un z-index supérieur peut ne pas apparaître devant s'il ne se trouve pas dans le même contexte d'empilement que les autres éléments. Comprendre les contextes d'empilement est important pour les mises en page plus complexes.

N'hésitez pas à modifier les valeurs et à expérimenter pour voir comment z-index affecte l'ordre d'empilement des éléments.