Comprends comment fonctionnent les contextes d'empilement CSS, comment z-index contrôle l'ordre des couches pour les éléments positionnés, et apprends les patterns courants pour gérer le contenu qui se chevauche.
La propriété z-index contrôle l'ordre d'empilement des éléments qui se chevauchent. Les éléments avec une valeur z-index plus élevée sont rendus devant les éléments avec une valeur plus faible.
Règle critique : z-index ne fonctionne que sur les éléments positionnés — c'est-à-dire les éléments avec position défini sur relative, absolute, fixed, ou sticky. Il n'a aucun effet sur les éléments positionnés de manière statique.
.behind {
position: relative;
z-index: 1;
}
.in-front {
position: relative;
z-index: 10;
}Sans un z-index explicite, les éléments positionnés s'empilent dans l'ordre du code source — les éléments plus tardifs dans le HTML apparaissent au-dessus des éléments plus précoces. La propriété z-index te permet de modifier ce comportement par défaut.
Les valeurs peuvent être n'importe quel entier, y compris des nombres négatifs. Un z-index négatif place l'élément derrière les éléments avec z-index: auto (la valeur par défaut).
/* Un contexte d'empilement est créé par : */
/* 1. L'élément racine (<html>) */
/* 2. position + z-index (pas auto) */
.modal {
position: fixed;
z-index: 1000;
}
/* 3. opacity inférieure à 1 */
.faded {
opacity: 0.9; /* crée un contexte d'empilement */
}
/* 4. transform, filter, ou perspective */
.card {
transform: translateZ(0); /* crée un contexte d'empilement */
}
/* 5. isolation: isolate */
.isolated {
isolation: isolate; /* crée explicitement un contexte d'empilement */
}
/* Échelle z-index courante pour les projets */
/* base: 1 */
/* dropdown: 100 */
/* sticky: 200 */
/* overlay: 300 */
/* modal: 400 */
/* toast: 500 */Un contexte d'empilement est une conceptualisation en trois dimensions des éléments HTML le long de l'axe z. Chaque contexte d'empilement est autonome : les valeurs z-index à l'intérieur d'un contexte sont indépendantes des valeurs dans un autre contexte.
C'est la source de confusion la plus courante avec z-index. Considère ce scénario :
<div class="parent-a" style="position: relative; z-index: 1;">
<div class="child" style="position: relative; z-index: 999;">Je suis piégé !</div>
</div>
<div class="parent-b" style="position: relative; z-index: 2;">
Je serai toujours au-dessus de child !
</div>Même si l'enfant a z-index: 999, il ne pourra jamais apparaître au-dessus de parent-b car parent-a (avec z-index: 1) crée un contexte d'empilement. Le z-index élevé de l'enfant n'importe que à l'intérieur du contexte de parent-a.
Conseils pour gérer l'empilement :
z-index: 99999.isolation: isolate pour créer un contexte d'empilement sans effets secondaires.opacity, transform et filter créent également des contextes d'empilement.Pourquoi un élément avec z-index: 9999 pourrait-il quand même apparaître derrière un autre élément avec z-index: 2 ?