> Comprendre la propriété position en CSS : static, relative, absolute, fixed et sticky expliquées une par une, avec top/left/z-index, le contexte de positionnement et des cas concrets (header sticky, overlay). *Source : https://coder-studio.com/tutoriels/position-css/* --- [// Web](https://coder-studio.com/tutoriels/) # La propriété position en CSS (static, relative, absolute, fixed, sticky) Par **Kévin Papot** · publié le 10 décembre 2025 La propriété **`position`** est l’une des plus mal comprises de CSS. Elle contrôle la façon dont un élément est placé dans la page : suit-il le flux normal, se décale-t-il par rapport à sa position d’origine, ou sort-il complètement du flux pour flotter par-dessus le reste ? Comprendre ses cinq valeurs — `static`, `relative`, `absolute`, `fixed`, `sticky` — et surtout la notion de **contexte de positionnement**, débloque une bonne partie du CSS de mise en page. Ce guide les passe en revue une à une, avec du code réel et les pièges à connaître. ## Le point de départ : position: static C’est la valeur **par défaut** de tous les éléments. Un élément `static` suit le flux normal du document : il se place là où le HTML le prévoit, les uns après les autres, sans décalage possible. ``` .boite { position: static; /* valeur par défaut, rarement écrite explicitement */ } ``` Point crucial : sur un élément `static`, les propriétés `top`, `right`, `bottom`, `left` et `z-index` **n’ont aucun effet**. Elles sont tout simplement ignorées. Pour décaler ou superposer un élément, il faut d’abord lui donner une autre valeur de `position`. ## position: relative — se décaler sans quitter le flux Avec `relative`, l’élément reste à sa place dans le flux (il occupe toujours son emplacement d’origine), mais on peut le **décaler** avec `top`, `left`, etc. par rapport à cette position initiale. ``` .badge { position: relative; top: -8px; /* remonte de 8px */ left: 12px; /* décale de 12px vers la droite */ } ``` Le décalage est purement visuel : l’espace d’origine de l’élément reste réservé, et les éléments voisins ne bougent pas. Mais `relative` a un second rôle, souvent le plus important : il crée un **contexte de positionnement** pour les enfants en `absolute`. C’est la clé du point suivant. ## position: absolute — sortir du flux Un élément `absolute` est **retiré du flux** : il ne réserve plus d’espace, et les autres éléments se comportent comme s’il n’existait pas. Il se positionne alors par rapport à son **ancêtre positionné le plus proche** — c’est-à-dire le premier parent qui possède une `position` autre que `static` (donc `relative`, `absolute`, `fixed` ou `sticky`). ``` .parent { position: relative; /* devient le référentiel */ } .enfant { position: absolute; top: 0; right: 0; /* collé en haut à droite du parent */ } ``` Si **aucun** ancêtre n’est positionné, l’élément `absolute` se cale par rapport au bloc racine (proche du ``), ce qui donne des résultats surprenants. Le réflexe à retenir : **pour positionner un enfant en `absolute`, on met `position: relative` sur le parent qui doit servir de repère.** C’est le duo le plus courant de tout le positionnement CSS. ### Cas concret : un overlay sur une image ```

Promo

``` ``` .carte { position: relative; } .etiquette { position: absolute; top: 10px; left: 10px; background: #e11d48; color: #fff; padding: 4px 8px; border-radius: 4px; } ``` L’étiquette se superpose au coin supérieur gauche de l’image, quelle que soit la taille de la carte. ## position: fixed — ancré à la fenêtre `fixed` ressemble à `absolute` (l’élément quitte le flux), mais son référentiel est la **fenêtre du navigateur** (le _viewport_), pas un parent. Résultat : l’élément reste à la même place à l’écran même quand on fait défiler la page. ``` .bouton-retour-haut { position: fixed; bottom: 24px; right: 24px; z-index: 100; } ``` C’est idéal pour un bouton « retour en haut », une bannière de cookies, ou un chat d’assistance qui doit rester visible en permanence. Attention : un `fixed` peut recouvrir du contenu, d’où l’importance de gérer le `z-index` (voir plus bas). ## position: sticky — le meilleur des deux mondes `sticky` est un hybride : l’élément se comporte comme `relative` tant qu’il est visible dans son conteneur, puis se **fige** comme `fixed` dès qu’il atteint un seuil défini au défilement. C’est la technique moderne pour un en-tête ou une barre latérale qui « colle » en haut. ``` .entete { position: sticky; top: 0; /* se fige dès que le haut atteint le bord supérieur */ z-index: 50; background: #fff; } ``` Trois conditions pour que `sticky` fonctionne : - Il faut **au moins un seuil** défini (`top`, `bottom`, `left` ou `right`). Sans `top: 0` par exemple, rien ne se passe. - L’élément colle **à l’intérieur de son conteneur parent** : dès que le parent défile hors de vue, l’élément « décolle » et disparaît avec lui. - Un parent avec `overflow: hidden` ou `overflow: auto` peut casser l’effet. C’est le piège le plus fréquent. ## top, left, right, bottom : comment ils s’interprètent Ces quatre propriétés ne s’appliquent qu’aux éléments **positionnés** (tout sauf `static`). Leur sens dépend de la valeur de `position` : - En `relative` : décalage par rapport à la position d’origine. - En `absolute` / `fixed` : distance par rapport aux bords du référentiel (ancêtre positionné ou viewport). - En `sticky` : seuil de déclenchement du figeage. On peut combiner `top` et `bottom` (ou `left` et `right`) sur un `absolute` pour **étirer** un élément : ``` .superposition { position: absolute; top: 0; bottom: 0; left: 0; right: 0; /* recouvre entièrement le parent positionné */ } ``` ## z-index : gérer la superposition Dès que des éléments se chevauchent (typiquement en `absolute`, `fixed` ou `sticky`), `z-index` décide lequel passe **devant**. Plus la valeur est haute, plus l’élément est au premier plan. ``` .modale { position: fixed; z-index: 1000; } .fond-modale { position: fixed; z-index: 999; /* juste derrière la modale */ } ``` Deux subtilités indispensables : - `z-index` **n’agit que sur les éléments positionnés**. Sur un `static`, il est ignoré. - Le `z-index` s’évalue au sein d’un **contexte d’empilement**. Un enfant ne peut pas passer devant un élément situé dans un contexte parent qui est lui-même en dessous. Certaines propriétés (comme `transform`, `opacity < 1` ou `position: fixed`) créent un nouveau contexte d’empilement — d’où des `z-index: 9999` qui « ne marchent pas ». Dans ce cas, cherchez le parent qui crée le contexte. ## Récapitulatif : quelle valeur pour quel besoin - **`static`** : le comportement par défaut, dans le flux. On n’y touche pas. - **`relative`** : décaler légèrement un élément, ou (surtout) créer un repère pour un enfant `absolute`. - **`absolute`** : superposer un élément dans un conteneur (badge, overlay, menu déroulant). - **`fixed`** : garder un élément visible à l’écran pendant le défilement (bouton flottant, bannière). - **`sticky`** : figer un en-tête ou une barre latérale à partir d’un seuil de défilement. Une fois ce modèle en tête, beaucoup de mises en page se construisent naturellement. Le positionnement se combine d’ailleurs avec les autres outils de layout : pour organiser des blocs entiers, on préfère aujourd’hui Flexbox ou la grille, comme le détaille notre [guide de CSS Grid](https://coder-studio.com/tutoriels/css-grid-guide/). Le positionnement, lui, reste l’outil de la superposition et de l’ancrage. ## En résumé `position` gouverne la relation d’un élément avec le flux et ses voisins. Retenez le trio de base : `relative` sur le parent, `absolute` sur l’enfant pour le superposer ; `fixed` pour ce qui doit rester à l’écran ; `sticky` pour ce qui colle au défilement. Ajoutez `z-index` pour trancher les chevauchements, en gardant en tête les contextes d’empilement. Avec ces repères, la propriété qui semblait capricieuse devient prévisible. ## À lire ensuite - [Centrer un élément en CSS : toutes les méthodes](https://coder-studio.com/tutoriels/centrer-element-css/) - [Flexbox : le guide complet par l’exemple](https://coder-studio.com/tutoriels/flexbox-guide/) - [Le responsive en CSS : media queries et bonnes pratiques](https://coder-studio.com/tutoriels/css-responsive-media-queries/)