La propriété CSS position ne déplace pas directement un élément. Elle définit la manière dont sa boîte se place dans la page. Pour l’utiliser sans effet inattendu, il faut répondre à deux questions : l’élément conserve-t-il sa place dans le flux du document, et par rapport à quel repère ses décalages sont-ils calculés ? Les réponses varient selon la valeur choisie.
Commencer par le flux normal et les 4 décalages
Le flux normal correspond à l’ordre naturel dans lequel le navigateur affiche les éléments HTML. Les blocs s’empilent généralement les uns sous les autres, tandis que les contenus en ligne suivent le texte. La valeur par défaut de position est static. Dans ce cas, l’élément suit simplement le flux de la page.
Quiz sur le positionnement CSS
Répondez aux 6 questions, puis validez pour obtenir votre score et les corrections.
Les propriétés top, right, bottom et left indiquent un décalage depuis un bord. Elles peuvent aussi être regroupées avec la propriété raccourcie inset. Elles ne produisent un effet que lorsque la valeur de position l’autorise. Avec position: static, une déclaration comme top: 20px ou left: 40px ne change rien à l’affichage. C’est l’une des causes courantes d’un élément qui semble refuser de bouger.
Un décalage visuel n’est pas toujours un déplacement dans la mise en page
Il faut distinguer l’image affichée de l’espace réservé par le document. Un élément peut être décalé visuellement tout en laissant son emplacement initial occupé. À l’inverse, il peut sortir du flux et ne plus influencer la position des éléments voisins. Cette différence permet de comprendre le choix entre relative, absolute, fixed et sticky.
Imaginez la page comme une grille de mise en page. Chaque élément occupe d’abord une case implicite, dans l’ordre de lecture. Avec relative, l’élément change d’emplacement visuel sans libérer sa case. Avec absolute, il sort de la grille et se superpose à un autre emplacement. Avec fixed, il s’attache à la zone visible du navigateur. Cette image aide à prévoir les chevauchements, les espaces inattendus et les éléments qui passent devant le contenu.
Comparer les 5 valeurs de position en CSS
| Valeur | Reste dans le flux ? | Repère principal | Usage courant |
|---|---|---|---|
| static | Oui | Flux normal | Mise en page standard |
| relative | Oui, espace conservé | Position initiale | Petit décalage, parent de référence |
| absolute | Non | Ancêtre positionné ou bloc de référence | Badge, icône, superposition |
| fixed | Non | Viewport | Bouton persistant, barre flottante |
| sticky | Oui au départ | Conteneur de défilement | En-tête ou sommaire collant |
Référence CSS officielle pour positionner les éléments — Découvrez comment utiliser la propriété CSS position et les propriétés top, right, bottom et left pour contrôler le placement des éléments.
Static et relative : garder la place prévue
Position: static convient lorsqu’aucun positionnement particulier n’est nécessaire. Position: relative, lui, conserve l’élément dans le flux. Son espace reste donc occupé à sa position d’origine. Les offsets déplacent uniquement son rendu. Par exemple, avec top: 10px, l’élément apparaît 10 pixels plus bas, mais les autres blocs ne remontent pas pour remplir l’espace laissé par ce décalage visuel.
La valeur relative sert aussi à créer un repère local pour un enfant en absolute. Elle ne doit pas être ajoutée automatiquement à tous les conteneurs. Utilisez-la sur le parent lorsque celui-ci doit réellement devenir le cadre d’ancrage d’un élément superposé.
Absolute, fixed et sticky : trois comportements distincts
Avec position: absolute, l’élément est retiré du flux normal. Les éléments suivants se placent comme s’il n’existait pas. Il se positionne par rapport au plus proche ancêtre dont la position n’est pas static. Si aucun ancêtre ne convient, le repère remonte au bloc de référence initial de la page. Cette valeur convient pour placer un pictogramme dans un champ, un ruban sur une carte produit ou un badge dans le coin d’une image.
Position: fixed retire également l’élément du flux, mais l’ancre généralement au viewport, c’est-à-dire à la zone visible du navigateur. Un bouton d’aide placé en bas à droite reste ainsi présent pendant le défilement. Cette persistance doit rester mesurée : sur un petit écran, un élément fixe peut masquer un bouton, un formulaire ou une partie du texte.
Position: sticky commence dans le flux normal, puis adopte un comportement proche d’un élément fixé lorsque le défilement atteint un seuil défini, par exemple avec top: 0. Il reste toutefois limité par son conteneur. Il ne demeure donc pas collé au-delà de la zone parente qui l’accueille.
Choisir le bon point de référence
Le parent positionné, clé de l’ancrage absolute
Pour placer un élément en haut à droite d’une carte, donnez généralement au parent une position, souvent relative, puis à l’enfant une position absolute avec top: 0 et right: 0. Sans parent positionné, le badge risque de s’ancrer à un ancêtre beaucoup plus haut dans la structure, voire au bloc de référence initial de la page. Le résultat peut sembler aléatoire, alors qu’il suit une règle précise.
Les offsets ne sont pas des coordonnées universelles. Left: 0 signifie « aligner le bord gauche sur le bord gauche du repère choisi », et non « aller au bord gauche de l’écran » dans tous les cas. Avant de modifier une valeur numérique, identifiez donc l’ancêtre de référence et vérifiez les positions définies sur les parents.
Pourquoi sticky ne colle parfois pas
Un élément sticky a besoin d’un seuil, comme top: 0, pour savoir à quel moment se fixer. Son comportement dépend aussi du conteneur qui défile réellement. Un ancêtre doté d’une zone de défilement ou d’un débordement peut devenir son cadre de référence et limiter l’effet attendu.
La hauteur disponible compte également. Un élément collant ne peut pas rester affiché au-delà de la fin de son conteneur parent. Si la zone est trop courte, si le conteneur ne défile pas comme prévu ou si aucun seuil n’est défini, sticky peut donner l’impression de ne pas fonctionner.
Éviter les pièges de superposition et du responsive
Sortir un élément du flux avec absolute ou fixed peut provoquer des chevauchements. Prévoyez l’espace nécessaire lorsque l’interface l’exige. Une barre fixe en bas de l’écran peut, par exemple, nécessiter un espacement inférieur sur le contenu pour ne pas masquer le dernier bouton.
Testez aussi les textes longs, les zooms et les petites largeurs d’écran. Un positionnement correct sur une maquette large peut devenir illisible sur mobile. Les dimensions du contenu changent, les lignes se renvoient et les éléments fixes occupent une part plus importante de la zone visible.
Lorsque deux éléments se recouvrent, z-index permet de contrôler leur ordre d’empilement, mais seulement dans le contexte d’empilement approprié. Augmenter sa valeur sans vérifier la structure ne règle pas toujours le problème. Un parent peut créer son propre contexte et maintenir son enfant derrière un autre bloc. Examinez donc d’abord les parents et les propriétés qui influencent l’empilement.
Une méthode de décision simple
- Gardez static pour la mise en page normale.
- Choisissez relative pour un léger décalage ou comme repère local d’un enfant.
- Utilisez absolute pour une superposition attachée à un composant précis.
- Préférez fixed pour une action qui doit rester visible dans le viewport.
- Retenez sticky pour maintenir une information accessible pendant le défilement d’une section.
Dans tous les cas, commencez par observer le flux et le conteneur de référence avant d’ajouter des offsets. Cette vérification évite la plupart des corrections fragiles fondées sur des valeurs négatives, des marges excessives ou des z-index démesurés.