Les 5 valeurs de position CSS et quand les utiliser
Le positionnement CSS est l’un des concepts les plus confus pour les débutants. La propriété position a 5 valeurs possibles, chacune avec un comportement différent. Ce guide les explique avec des exemples visuels que vous pouvez reproduire.
1. position: static (par défaut)
C’est le positionnement par défaut de tous les éléments. L’élément suit le flux normal du document : il apparaît après l’élément précédent, les propriétés top, right, bottom, left et z-index n’ont aucun effet.
/* Inutile d'écrire ça — c'est le défaut */
.element { position: static; }2. position: relative
L’élément reste dans le flux normal MAIS peut être décalé par rapport à sa position d’origine avec top, right, bottom, left. L’espace qu’il occupait est préservé.
.box {
position: relative;
top: 20px; /* Décalé de 20px vers le bas */
left: 30px; /* Décalé de 30px vers la droite */
}
/* L'espace original de .box est toujours réservé dans le flux */Utilisation principale : servir de référence pour un enfant en position: absolute.
3. position: absolute
L’élément est retiré du flux et positionné par rapport à son plus proche parent positionné (un parent avec position: relative, absolute, fixed ou sticky). Si aucun parent n’est positionné, il se positionne par rapport au <body>.
.parent {
position: relative; /* Sert de référence */
width: 400px;
height: 300px;
}
.badge {
position: absolute;
top: 10px; /* 10px depuis le haut du parent */
right: 10px; /* 10px depuis la droite du parent */
}
.overlay {
position: absolute;
inset: 0; /* Raccourci pour top:0 right:0 bottom:0 left:0 */
background: rgba(0, 0, 0, 0.5);
}Cas d’utilisation courants :
- Badge « Nouveau » ou « Promo » en coin d’une carte produit
- Overlay sombre sur une image
- Menu déroulant qui s’affiche au-dessus du contenu
- Tooltip qui apparaît près d’un élément
4. position: fixed
L’élément est retiré du flux et positionné par rapport à la fenêtre du navigateur. Il reste à la même place même quand l’utilisateur scrolle.
/* Header fixe en haut de page */
.header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* IMPORTANT : ajoutez du padding-top au body pour compenser */
body { padding-top: 64px; }
/* Bouton retour en haut */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999;
}5. position: sticky
L’élément se comporte comme relative jusqu’à un seuil de scroll, puis devient fixed. C’est le meilleur choix pour les headers qui se « collent » en haut de page.
.sticky-header {
position: sticky;
top: 0; /* Se colle quand il atteint le top du viewport */
z-index: 100;
background: white;
}
/* Sticky sidebar */
.sidebar {
position: sticky;
top: 80px; /* Se colle à 80px du haut (sous le header) */
height: fit-content;
}Piège courant : sticky ne fonctionne que si le parent a une hauteur suffisante. Si le parent a la même hauteur que l’enfant sticky, il n’y a pas d’espace pour « coller ».
Récapitulatif visuel
| Position | Dans le flux ? | Référence | Scroll | Usage typique |
|---|---|---|---|---|
static |
Oui | — | Défile | Défaut |
relative |
Oui (décalé) | Sa position d’origine | Défile | Référence pour absolute |
absolute |
Non | Parent positionné | Défile | Badges, overlays, menus |
fixed |
Non | Fenêtre | Reste fixe | Header, bouton flottant |
sticky |
Oui → Non | Viewport + parent | Colle au seuil | Header collant, sidebar |
z-index : gérer la superposition
/* z-index ne fonctionne QUE sur les éléments positionnés */
.modal-overlay { z-index: 1000; }
.modal-content { z-index: 1001; }
.dropdown { z-index: 100; }
.header { z-index: 50; }
.tooltip { z-index: 200; }
/* Convention : utilisez des multiples de 10 ou 100 pour pouvoir insérer des valeurs entre */Exercice
- Créez une page avec un header sticky, un contenu long, et un bouton « retour en haut » fixed
- Ajoutez un badge « PROMO » en absolute dans le coin d’une carte produit
- Créez un modal (overlay fixed + contenu centré en absolute)
- Créez un menu déroulant qui s’affiche en absolute sous un bouton
