Qu'est-ce que le z-index et comment est-il utilisé dans le développement web?

z-index — c'est une propriété CSS qui détermine l'ordre d'empilement (stacking) des éléments en fonction de leur position sur l'axe Z. Les éléments avec des valeurs plus grandes de z-index sont affichés au-dessus des éléments avec des valeurs plus faibles.

Il est utilisé pour gérer la profondeur d'empilement des éléments avec positionnement (c'est-à-dire, les éléments dont la propriété position a des valeurs autres que static) : relative, absolute, fixed, sticky.

Points clés d'utilisation :

• Les éléments avec une position statique (position: static;) ne participent pas au contexte d'empilement et ignorent z-index.
• La valeur de z-index ne s'applique qu'aux éléments qui créent un nouveau contexte d'empilement. Ce contexte est créé, par exemple, en utilisant position avec des valeurs autres que static, ou en appliquant d'autres règles CSS (comme opacity < 1).
• Dans un même contexte d'empilement, les éléments avec un z-index plus élevé sont placés au-dessus.
• Les contextes d'empilement imbriqués s'empilent comme une seule unité dans le contexte parent.
• Sans une attribution explicite de z-index, l'ordre d'empilement est déterminé par l'ordre des éléments dans le DOM.

Exemple d'utilisation :

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Au-dessus de .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* En dessous de .box1 */
}