La propriété position en CSS (static, relative, absolute, fixed, sticky)

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 <html>), 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

<div class="carte">
  <img src="photo.jpg" alt="Produit" />
  <span class="etiquette">Promo</span>
</div>

.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. 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.