Propriété CSS position : guide complet static, relative, absolute, fixed, sticky

La propriété CSS position contrôle comment un élément est positionné dans la mise en page document. Cinq valeurs existent — chacune répond à des besoins mise en page distincts.

Référence valeurs

Valeur	Comportement	Point référence	Dans flux ?	Usages courants
static (défaut)	Flux document normal	S/O	Oui	Base ; réinitialise positionnement hérité
relative	Décalage position normale	Lui-même	Oui (espace réservé)	Décalages légers ; créer contexte positionnement enfants absolute
absolute	Retiré flux ; positionné	Plus proche ancêtre positionné	Non	Infobulles, menus déroulants, modales, badges, overlays
fixed	Retiré flux ; relatif viewport	Viewport	Non	Barres nav, sidebars, widgets chat, bannières cookies
sticky	Relative jusqu'au seuil défilement, puis fixed	Viewport (quand collé)	Oui (jusqu'à collé)	En-têtes sections, boutons "haut page", filtres persistants

Concepts clés

• Contexte positionnement : relative, absolute, fixed, sticky sur ancêtre crée bloc conteneur pour descendants absolute.
• Propriétés décalage : top, right, bottom, left ne fonctionnent que sur éléments non-static.
• Z-index : Contrôle ordre empilement uniquement pour éléments positionnés (non-static).
• sticky nécessite seuil (ex: top: 0) et ancêtre défilable avec hauteur définie.

Patterns pratiques

/* Menu déroulant */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; } /* En-tête section sticky */ .section-header { position: sticky; top: 0; background: white; z-index: 10; } /* Nav fixe */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } 

Choisissez la valeur moins disruptive qui atteint objectif mise en page — défaut static/relative ; absolute/fixed/sticky seulement quand nécessaire.