Positionnement : relative, absolute, fixed, sticky, z-index

Ancrez badges, en-têtes et fenêtres modales au bon endroit grâce aux positions CSS et à une échelle de z-index maîtrisée.

8 min · 3 questions

Par défaut, tout élément est en position: static et suit le flux du document. position: relative a deux usages : décaler légèrement un élément sans perturber ses voisins, et surtout servir de référence aux enfants en position: absolute. C'est le motif le plus courant du positionnement : un badge de promotion, une infobulle ou une icône ancrés à un coin de leur parent.

.product-card {
  position: relative;
}

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

position: fixed fige un élément par rapport à la fenêtre, quel que soit le défilement : bannière de cookies, bouton de retour en haut. position: sticky est un hybride : l'élément défile normalement avec la page, puis se fige dès qu'il atteint le seuil que vous définissez (par exemple top: 0). C'est la solution moderne pour les en-têtes qui restent visibles.

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

Quand des éléments se superposent, z-index décide qui passe devant - mais uniquement sur les éléments positionnés. Adoptez une échelle documentée plutôt que des valeurs au hasard : 10 pour les menus déroulants, 100 pour l'en-tête, 1000 pour les fenêtres modales. Attention : un parent qui crée son propre contexte d'empilement (par exemple avec une opacity inférieure à 1) plafonne le z-index de tous ses enfants.

.dropdown {
  z-index: 10;
}

.site-header {
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Par rapport à quoi se positionne un élément en position: absolute ?
   • Toujours par rapport à la fenêtre du navigateur
   • Par rapport à l'ancêtre positionné le plus proche, sinon la fenêtre
   • Par rapport à son parent direct, quelle que soit sa position
2. Quelle est la différence entre fixed et sticky ?
   • fixed reste toujours figé à l'écran, sticky ne se fige qu'à partir d'un seuil de défilement
   • sticky s'affiche plus rapidement que fixed
   • Aucune, ce sont deux synonymes
3. Pourquoi un z-index: 999 peut-il rester sans effet ?
   • Parce que la valeur maximale autorisée est 100
   • Parce que l'élément n'est pas positionné, ou est piégé dans un contexte d'empilement inférieur
   • Parce que z-index ne fonctionne qu'avec Grid