Positionnement statique et relatif

La propriété position contrôle la manière dont un élément est placé dans le flux du document. Les cinq valeurs sont : static, relative, absolute, fixed et sticky.

Chaque élément utilise position: static par défaut. Les éléments statiques suivent le flux normal du document — les éléments de type bloc s’empilent verticalement et les éléments inline s’écoulent de gauche à droite. Les propriétés de décalage (top, right, bottom, left) n’ont aucun effet.

position: relative conserve l’élément dans le flux normal, mais vous permet de le décaler par rapport à sa propre position normale à l’aide de top, right, bottom et left.

Lorsque vous utilisez position: relative avec des décalages, l’élément se déplace visuellement, mais son espace d’origine dans la mise en page reste réservé. Les autres éléments ne remplissent pas cet espace vide.

Les propriétés de décalage déplacent l’élément à partir de son point de référence :

• top : déplace l’élément vers le bas à partir du bord supérieur
• left : déplace l’élément vers la droite à partir du bord gauche
• Les valeurs négatives inversent la direction

z-index ne fonctionne que sur les éléments positionnés (et non sur les éléments statiques). Si vous devez contrôler l’ordre des calques, définissez au moins position: relative.

L’utilisation la plus importante de position: relative consiste à faire d’un élément le bloc englobant des enfants positionnés en absolu — même sans aucune valeur de décalage.

La combinaison de position: relative et de transform crée un nouveau contexte d’empilement. L’élément reste dans le flux, mais peut être transformé visuellement.

Évitez de définir position: relative sur chaque élément. Cela crée des contextes d’empilement qui peuvent compliquer la gestion de z-index. Utilisez cette propriété uniquement lorsque vous avez besoin de décalages ou d’ancrer des enfants positionnés en absolu.

Comme le positionnement relatif n’affecte pas le flux de la mise en page, vous pouvez animer top/left en toute sécurité pour créer des effets visuels — même si l’animation de transform: translate() est plus performante.

Dans DevTools, consultez le panneau Computed pour voir la valeur effective de position. Le schéma du modèle de boîte affiche les coordonnées exactes des décalages appliqués.

Qu’advient-il de l’espace occupé dans la mise en page lorsqu’on applique position: relative; top: 20px à un élément ?

position: static est la valeur par défaut — aucun décalage ni empilement. position: relative permet de décaler l’élément à partir de sa propre position tout en conservant son espace dans la mise en page. Son rôle le plus important est de servir de bloc englobant aux enfants positionnés en absolu.