position en CSS : quatre modes de placement et un ancêtre à ne jamais oublier

Un élément CSS suit par défaut le flux normal de la page : il s'empile après le précédent, sans qu'on ait besoin de préciser où il va. La propriété position change cette règle : elle permet de sortir un élément de ce flux, ou de le déplacer légèrement sans perturber ses voisins.

C'est une des propriétés les plus mal comprises du CSS, parce que son comportement change radicalement selon la valeur choisie, et parce qu'une seule de ces valeurs dépend d'un élément parent qu'on oublie facilement de définir.

Définition

position définit comment un élément est positionné dans la page. Elle prend quatre valeurs principales : static (le comportement par défaut, aucun positionnement particulier), relative, absolute et fixed. Dès qu'une valeur autre que static est appliquée, les propriétés top, right, bottom et left s'activent et permettent de décaler l'élément par rapport à un point de référence.

Les quatre valeurs, une par une

relative est le cas le plus discret : l'élément garde exactement la place qu'il aurait eue normalement, mais un top ou un left le déplace visuellement, sans que ses voisins ne le remarquent. absolute est plus radical : l'élément quitte totalement le flux, comme le ferait un display: none suivi d'un repositionnement manuel, et ses voisins se comportent comme s'il n'existait plus.

Exemple concret : le piège de l'ancêtre positionné

Un élément en absolute se positionne par rapport à son ancêtre positionné le plus proche, c'est à dire le premier parent, en remontant dans l'arborescence, dont le position n'est pas static. S'il n'en trouve aucun, il remonte jusqu'à la page entière.

.carte {
  position: relative;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Ici, le badge se colle au coin de la carte, parce que .carte porte position: relative. Si cette ligne disparaît, le badge continue à fonctionner, mais il se positionne par rapport à la page entière : il migre en haut à droite de l'écran, loin de sa carte, un bug classique qui donne l'impression que absolute est cassé alors qu'il obéit simplement à une autre règle. Notre formation HTML et CSS fait volontairement retirer cette ligne en exercice, pour que l'effet du piège se voie une fois avant de devenir un réflexe à vérifier.

Cas d'usage : quelle valeur pour quel besoin

• relative : un léger ajustement visuel, ou servir de repère pour un enfant en absolute, sans rien changer d'autre à la mise en page.
• absolute : un badge, une infobulle, un menu déroulant, tout élément qui doit se superposer à un contenu précis.
• fixed : un en-tête ou un bouton qui doit rester visible en permanence, même quand la page défile.
• position: sticky : un entre-deux qui se comporte comme relative jusqu'à un certain point de défilement, puis comme fixed.

Le z-index entre souvent en jeu juste après position : un élément positionné peut se superposer à un autre, et c'est cette seconde propriété qui décide lequel passe devant.

Questions fréquentes

Parce qu'aucun de ses parents ne porte de position différente de static. Sans ancêtre positionné, l'élément absolu remonte jusqu'à la racine du document. La correction consiste presque toujours à ajouter position: relative sur le parent direct qui doit servir de repère.

relative déplace un élément tout en gardant sa place réservée dans la page, comme si on le poussait légèrement sans toucher au reste. absolute le retire complètement du flux : plus aucune place n'est réservée, et il se superpose au contenu qui l'entoure.

Non. fixed colle un élément à la fenêtre du navigateur dès le chargement de la page, quel que soit l'endroit où l'on défile. position-sticky se comporte d'abord comme relative, puis se fige comme fixed uniquement après avoir franchi un seuil de défilement défini par top ou une autre propriété de décalage.