Prérequis
- Niveau : bases HTML/CSS, modèle de boîte.
- Outils : VS Code + Live Server, navigateur moderne (DevTools panneau « Computed » utile).
- Temps estimé : 45 min.
Pourquoi maîtriser position ?
Le positionnement CSS reste l’une des sources principales de bugs visuels (élément qui sort, sticky qui ne colle pas, modal mal centré). Comprendre les 5 valeurs (static, relative, absolute, fixed, sticky) et leur référence de positionnement vous évite des heures de débogage.
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 */Erreurs fréquentes
position: absolute qui se positionne par rapport au <body>
Cause : aucun parent n’a une position non-static.
Solution : ajoutez position: relative sur le parent direct (souvent une .card, .container).
position: sticky qui ne colle pas
Cause : parent avec overflow: hidden/auto/scroll, ou parent trop court (pas d’espace pour défiler).
Solution : retirez overflow sur les ancêtres, et assurez-vous que le parent est plus grand que l’élément sticky.
Z-index qui ne fonctionne pas
Cause : l’élément n’a pas de position définie (autre que static), OU il est dans un stacking context isolé (parent avec opacity, transform, filter…).
Solution : donnez une position à l’élément, et inspectez le parent pour repérer un stacking context indésirable.
Header fixed qui cache le contenu en haut
Cause : le header fixed est sorti du flux, le contenu commence sous lui.
Solution : ajoutez padding-top au body égal à la hauteur du header (ou utilisez position: sticky à la place).
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
Dans la continuité
- CSS Flexbox
- CSS Grid Layout
- Référence : MDN — position
- Stacking context : MDN — Stacking context
- Aide visuelle : CSS-Tricks — position
Étape 1 : Comprendre static, le mode par défaut
Avant de manipuler les autres positions, il faut savoir que position: static est appliqué par défaut à tout élément HTML. Dans ce mode, l’élément suit le flux normal du document, top, right, bottom, left et z-index n’ont aucun effet. Beaucoup de bugs CSS rencontrés par les développeurs juniors à Dakar ou Abidjan viennent d’oublier cette règle de base. Comprendre static évite de perdre des heures à chercher pourquoi un top: 50px ne décale rien à l’écran.
.boite { position: static; top: 50px; /* ignoré */ }Si vous inspectez la boîte dans DevTools de Chrome, vous verrez que la propriété top est bien lue mais sans effet visuel. Validation pratique est simple : l’élément reste là où le flux le place naturellement, sans aucun décalage.
Étape 2 : Décaler avec position: relative
Le mode relative conserve la place de l’élément dans le flux mais permet un décalage visuel via top/left. C’est utile pour de petits ajustements graphiques sans casser la mise en page d’un tableau de bord SaaS livré à un client du Plateau ou des Almadies. Relative sert aussi de référence pour des enfants en absolute, c’est sa principale utilité dans les layouts modernes.
.badge { position: relative; top: -4px; left: 8px; }Après application, le badge se déplace de 4 pixels vers le haut et 8 vers la droite, mais l’espace original reste réservé. Vérifiez avec l’outil Layout que la zone d’origine est conservée en bordure pointillée, signe que le flux n’est pas perturbé.
Étape 3 : Sortir du flux avec position: absolute
L’absolute retire l’élément du flux et le positionne par rapport à l’ancêtre positionné le plus proche, ou à défaut le viewport. C’est le piège classique : si aucun parent n’a position relative, absolute ou fixed, l’élément va se coller au coin du document. Pour un développeur débutant à Yopougon ou Cotonou, cette règle est le premier obstacle vraiment difficile à intérioriser.
.carte { position: relative; }
.carte .ribbon { position: absolute; top: 0; right: 0; }Le ruban se positionne maintenant dans le coin supérieur droit de la carte, peu importe la taille du contenu. Tester avec différentes longueurs de texte pour confirmer la robustesse du layout, surtout sur mobile en 4G.
Étape 4 : Position fixed pour barres flottantes
Le mode fixed ancre l’élément au viewport. Très utile pour un bouton WhatsApp flottant que vous proposez à vos clients e-commerce des Almadies, ou pour une barre de cookies. Fixed reste à la même position visuelle même quand l’utilisateur fait défiler la page, ce qui en fait l’outil idéal pour la navigation persistante.
.whatsapp-float { position: fixed; bottom: 20px; right: 20px; z-index: 9999; }Faites défiler la page : le bouton reste collé en bas à droite. Attention sur iOS Safari où certaines barres système peuvent recouvrir l’élément, prévoir safe-area-inset-bottom pour respecter la zone de sécurité.
Étape 5 : Position sticky, le compromis moderne
Sticky combine relative et fixed : l’élément reste dans le flux jusqu’à un seuil de scroll, puis se fige. Idéal pour des en-têtes de tableau ou un menu latéral de documentation technique, comme on en voit sur les sites de doc React ou Vue. Sticky est supporté nativement par tous les navigateurs récents en 2026.
.thead-sticky { position: sticky; top: 0; background: #fff; z-index: 10; }Vérifiez que le parent direct n’a pas overflow: hidden sinon sticky ne fonctionnera pas, c’est le piège le plus signalé sur Stack Overflow par les développeurs francophones.
Étape 6 : Maîtriser z-index et le contexte d’empilement
Z-index n’agit que sur les éléments positionnés (non-static). Chaque ancêtre avec z-index, opacity inférieur à 1 ou transform crée un nouveau contexte d’empilement. Un modal avec z-index 9999 peut donc passer derrière une carte parent qui a transform, situation rencontrée sur de nombreux tableaux de bord livrés à Bamako.
.modal { position: fixed; inset: 0; z-index: 1000; }Si la modale est masquée, inspecter chaque ancêtre dans DevTools pour repérer la propriété qui crée un contexte d’empilement isolant. La solution est souvent de remonter le modal en racine du DOM via un portail React.
Étape 7 : Centrer avec position et transform
Le pattern moderne pour centrer parfaitement une boîte de dialogue sans connaître ses dimensions reste très utilisé sur les apps métier livrées en Côte d’Ivoire ou au Bénin. Il combine position absolue, top et left à 50 pour cent, puis un transform translate de moins 50 pour cent sur les deux axes.
.dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }La boîte est parfaitement centrée. Combinez avec place-items: center sur un parent grid pour un code encore plus court et lisible.
Étape 8 : Tester sur mobile et 4G
Une fois vos positions configurées, ouvrez Chrome DevTools, mode Responsive, throttling 4G et profil Moto G4. Vos utilisateurs à Cotonou ou Bamako en 4G constateront que les éléments sticky restent fluides si vous évitez position fixed sur des éléments lourds avec ombres et flous coûteux à composer.
Pour explorer plus loin, consultez notre guide principal sur le développement web. Le tarif moyen d’un audit CSS pour un site e-commerce francophone se situe entre 250 000 et 500 000 FCFA (environ 380 à 760 EUR au taux 1 EUR = 655,957 FCFA).
Étape 9 : Auditer les contextes d’empilement
Avant la mise en production, listez tous les éléments avec position non-static et z-index dans une feuille. Documentez l’échelle z-index utilisée par votre design system : 10 pour les badges, 100 pour les menus, 1000 pour les modales, 9999 pour les toasts et notifications urgentes. Cette discipline évite des semaines de bugs visuels.
Étape 10 : Checklist de validation finale
Avant de pousser en production, vérifier que chaque élément positionné a un parent contextuel explicite, que z-index suit une échelle documentée, que sticky ne casse pas dans Safari iOS et que le rendu est correct sur écrans 320 pixels de large minimum. Un test sur appareil réel à Dakar reste la meilleure preuve de robustesse.
Étape 11 : Aller plus loin sur le terrain
Pour approfondir le sujet, prévoyez un atelier interne de 2 heures avec votre équipe à Dakar, Abidjan, Bamako ou Cotonou. Documentez les écarts entre théorie et pratique terrain, ajustez vos procédures internes, et mesurez l’impact sur 30 jours. Le retour sur investissement d’un tel atelier dépasse souvent 500 000 FCFA (environ 762 EUR au taux 1 EUR = 655,957 FCFA) en gains de productivité ou en réduction d’incidents critiques.
Pensez aussi à former un binôme interne pour pérenniser la compétence au-delà du prestataire externe et constituer une mémoire technique solide.
Enfin, archivez chaque décision dans un wiki interne (Notion, Outline, BookStack) afin que les nouveaux arrivants puissent monter en compétence rapidement sans repartir de zéro.
Étape 11 : Aller plus loin sur le terrain
Pour approfondir le sujet, prévoyez un atelier interne de 2 heures avec votre équipe à Dakar, Abidjan, Bamako ou Cotonou. Documentez les écarts entre théorie et pratique terrain, ajustez vos procédures internes, et mesurez l’impact sur 30 jours.
Le retour sur investissement d’un tel atelier dépasse souvent 500 000 FCFA (environ 762 EUR au taux 1 EUR = 655,957 FCFA) en gains de productivité ou en réduction d’incidents critiques sur l’infrastructure existante.
Étape 12 : Constituer une mémoire technique
Pensez à former un binôme interne pour pérenniser la compétence au-delà du prestataire externe. Archivez chaque décision dans un wiki interne (Notion, Outline, BookStack) afin que les nouveaux arrivants puissent monter en compétence rapidement sans repartir de zéro.
Pour les équipes de 5 personnes ou plus à Dakar ou aux Almadies, ajoutez un canal Slack ou Mattermost dédié au partage des incidents techniques résolus, ce qui multiplie la valeur du retour d’expérience collectif.
Une revue annuelle de la documentation technique évite l’obsolescence et maintient la qualité opérationnelle au plus haut niveau exigible.