Positionnement : relative, absolute, fixed, sticky

Par défaut, les éléments suivent le flux normal du document : les éléments de type bloc s’empilent verticalement et les éléments en ligne s’écoulent horizontalement dans le texte. La propriété position vous permet de sortir de ce flux pour créer des superpositions, des en-têtes fixes et des infobulles.

Chaque élément commence avec position: static. Cela signifie qu’il est positionné selon le flux normal du document. Les propriétés top, right, bottom et left n’ont aucun effet sur les éléments statiques.

position: relative conserve l’élément dans le flux normal, mais vous permet de le décaler par rapport à sa position d’origine à l’aide de top, right, bottom et left. Point essentiel : cette propriété crée un contexte de positionnement pour les descendants positionnés de manière absolue.

position: absolute retire l’élément du flux normal. Il est positionné par rapport à son ancêtre positionné le plus proche (toute position autre que statique). Si aucun ancêtre positionné n’existe, il est positionné par rapport à la fenêtre d’affichage.

Les éléments positionnés peuvent se chevaucher. Utilisez z-index pour contrôler l’ordre d’empilement. Plus z-index est élevé, plus l’élément apparaît au-dessus. Cela ne fonctionne que sur les éléments positionnés (pas sur ceux qui sont statiques). Cela crée un nouveau contexte d’empilement.

position: fixed retire l’élément du flux normal et l’ancre à la fenêtre d’affichage. Il ne défile pas avec la page. C’est idéal pour les en-têtes persistants, les boutons d’action flottants et les bannières de cookies.

position: sticky est un mode hybride : l’élément défile avec la page jusqu’à atteindre un seuil (défini avec top/bottom), puis il reste fixe. C’est utile pour les en-têtes de section dans les longs tableaux ou les barres latérales qui restent fixes après l’en-tête.

Une technique classique consiste à combiner position: absolute; top: 50%; left: 50% avec transform: translate(-50%, -50%) pour centrer parfaitement un élément dans son parent positionné.

Par défaut, un enfant positionné de manière absolue peut dépasser les limites de son parent. Ajouter overflow: hidden au parent masque tout ce qui se trouve en dehors de sa boîte — ce qui est utile pour les effets sur les images de cartes et le rognage des badges.

Certaines propriétés créent involontairement des contextes d’empilement : transform, filter, isolation: isolate. Cela peut provoquer des conflits de z-index : un élément z-index: 9999 peut rester derrière un autre parce qu’il se trouve dans un contexte d’empilement inférieur.

relative : décalages et contexte de positionnement. absolute : badges, info-bulles et superpositions par rapport à un parent. fixed : en-têtes persistants, fenêtres modales et notifications. sticky : en-têtes de section et navigation latérale qui suit le défilement. Évitez d’utiliser position pour les mises en page — utilisez Flex ou Grid.

static est la valeur par défaut. relative applique des décalages sans quitter le flux et crée un contexte de positionnement. absolute quitte le flux et se positionne par rapport à l’ancêtre positionné le plus proche. fixed reste ancré à la fenêtre d’affichage. sticky défile, puis reste fixe. Utilisez z-index pour contrôler l’ordre de chevauchement.