.svg)
Qu'est-ce que la propriété position en CSS ?
La propriété position en CSS détermine comment un élément est positionné dans le document. Elle influence directement la façon dont l'élément interagit avec le flux de la page et les autres éléments. C'est l'une des propriétés les plus fondamentales et les plus mal comprises du CSS, mais sa maîtrise est indispensable pour tout layout avancé.
Demandes illimitées, résultats rapides
Soumettez autant de briefs que vous le souhaitez. Nos plans vous permettent de gérer un flux continu de demandes design, sans limite et sans friction, et à un coût économique.
Les 5 valeurs de position
static est la valeur par défaut : l'élément suit le flux normal. relative permet de décaler un élément par rapport à sa position initiale sans affecter les autres. absolute retire l'élément du flux et le positionne par rapport à son ancêtre positionné le plus proche. fixed fixe l'élément par rapport au viewport (navigation sticky, modales). sticky combine relative et fixed — l'élément se comporte normalement jusqu'à atteindre un seuil de scroll.
Position et z-index
Seuls les éléments positionnés (non-static) peuvent utiliser z-index pour contrôler leur superposition. C'est pourquoi position et z-index sont intimement liés dans la gestion des couches visuelles d'une interface.
Demandes illimitées, résultats rapides
Soumettez autant de briefs que vous le souhaitez. Nos plans vous permettent de gérer un flux continu de demandes design, sans limite et sans friction, et à un coût économique.
Conclusion
La propriété position est un pilier du CSS. Comprendre la différence entre static, relative, absolute, fixed et sticky permet de construire des layouts complexes et de positionner précisément chaque élément d'une interface.
À retenir
- 5 valeurs : static, relative, absolute, fixed, sticky
- static = flux normal, absolute = hors du flux
- fixed = collé au viewport, sticky = hybride scroll
- Seuls les éléments non-static supportent z-index
- Essentiel pour les layouts avancés et composants UI
Demandes illimitées, résultats rapides
Soumettez autant de briefs que vous le souhaitez. Nos plans vous permettent de gérer un flux continu de demandes design, sans limite et sans friction, et à un coût économique.
