Z-index

z-index est une propriété CSS qui définit l’ordre de superposition (l’axe Z) des éléments positionnés sur une page web. Plus la valeur est élevée, plus l’élément apparaît « devant » les autres.

Conditions indispensables

Point crucial : z-index ne fonctionne que sur les éléments dont la propriété position est définie comme :

• relative
• absolute
• fixed
• sticky

Un élément avec position: static (la valeur par défaut) ignore totalement z-index, même si vous lui attribuez une valeur élevée.

Fonctionnement

• Valeurs : entiers (positifs, négatifs ou zéro). Exemple : z-index: 10;
• Ordre : plus la valeur est élevée, plus l’élément est proche de l’utilisateur (au premier plan)
• Valeur par défaut : auto (équivaut à 0, mais dans le contexte d’empilement du parent)

Contexte d’empilement (stacking context)

C’est la notion la plus subtile : chaque élément positionné crée un nouveau contexte d’empilement pour ses enfants. Les z-index des éléments enfants sont comparés uniquement à l’intérieur de ce contexte.

Exemple piégeux :

html

<div style="position:relative; z-index:1;">
  <div style="position:absolute; z-index:100;">Enfant A</div>
</div>
<div style="position:relative; z-index:2;">
  <div style="position:absolute; z-index:10;">Enfant B</div>
</div>

Ici, Enfant B (z-index:10) s’affichera devant Enfant A (z-index:100), car le parent d’Enfant A a un z-index inférieur (1 contre 2). L’ordre des parents prime sur celui des enfants.

Bonnes pratiques

1. Utilisez des valeurs simples : 1, 2, 3… Évitez les valeurs astronomiques comme 9999.
2. Privilégiez l’ordre du DOM : Avant d’utiliser z-index, essayez de réorganiser l’ordre des éléments HTML.
3. Créez des contextes d’empilement intentionnels avec isolation: isolate pour isoler des composants.
4. N’utilisez pas z-index sur des éléments de navigation si un position:relative suffit.

Analogie

Comme empiler des feuilles de papier transparent ou opaque sur une table :

• La feuille tout en haut (celle avec le plus grand z-index) est celle qu’on voit en premier.
• Elle peut cacher partiellement ou totalement celles qui se trouvent en dessous.
• Si la feuille du dessus est transparente (via opacity ou un fond semi-transparent), on aperçoit encore celles du dessous.
• Pour qu’une feuille puisse être déplacée vers le haut ou le bas dans la pile, il faut qu’elle soit située dans un espace qui le permet (en CSS, cela correspond aux éléments avec une position différente de static).