CSS position : relative, absolute, sticky et fixed

La propriété CSS position est l'outil fondamental qui décide comment un élément est placé sur la page et si des décalages comme top, right, bottom, left (et inset) s'appliquent ou non à lui. La plupart de la confusion vient du fait qu'on ignore en quoi les cinq valeurs (static, relative, absolute, fixed, sticky) diffèrent exactement. Dans cet article, je clarifie chacune d'elles avec des exemples concrets et du code qui fonctionne.

position: static — le comportement par défaut

Chaque élément est livré avec position: static sauf indication contraire. Les éléments statiques se placent dans le flux normal : les éléments de bloc s'empilent verticalement, les éléments en ligne se suivent horizontalement. Le détail clé : les propriétés de décalage comme top et left n'ont aucun effet sur un élément statique. Le z-index non plus.

.boite {
  position: static; /* valeur par défaut */
  top: 50px; /* aucun effet */
}

Donc si vous voulez déplacer un élément, la première étape est de le sortir de l'état statique.

position: relative — un décalage par rapport à soi-même

relative garde l'élément dans le flux normal mais vous permet d'appliquer des décalages. Ces décalages sont calculés par rapport à la position d'origine de l'élément. Point important : même lorsque l'élément se déplace, sa place d'origine dans le flux est conservée — les éléments voisins se comportent comme s'il était toujours là, et aucun vide n'est laissé.

.badge {
  position: relative;
  top: -8px;
  left: 12px;
}

Le second usage, tout aussi courant, de relative est invisible : il crée un contexte de positionnement pour les éléments absolute qu'il contient. Très souvent, on donne à une boîte position: relative sans aucun décalage ; le seul but est d'ancrer ses enfants par rapport à elle.

position: absolute — hors du flux

absolute retire complètement l'élément du flux normal ; il ne prend plus de place pour ses voisins. Sa position est calculée à partir de l'ancêtre positionné le plus proche (le parent le plus proche dont la position n'est pas static). S'il n'existe aucun ancêtre de ce type, la référence devient le bloc conteneur initial (généralement le viewport / <html>).

Le schéma classique est : relative à l'extérieur, absolute à l'intérieur.

.carte {
  position: relative;
}
.carte .etiquette {
  position: absolute;
  top: 8px;
  right: 8px;
}

Ici, .etiquette se colle au coin supérieur droit de la carte. Sans relative sur .carte, l'étiquette filerait vers l'ancêtre positionné le plus proche de la page. C'est pourquoi la réponse à « mon élément absolute est au mauvais endroit » est presque toujours : vous avez oublié de mettre relative sur le bon ancêtre.

Si vous définissez à la fois top et bottom sans hauteur, l'élément s'étire verticalement.
Le raccourci inset: 0 met les quatre bords à 0, étirant l'élément pour couvrir entièrement son ancêtre.

position: fixed — fixé au viewport

fixed retire aussi l'élément du flux, mais sa référence est toujours le viewport (pas un ancêtre). L'élément reste en place à l'écran même lorsque la page défile. C'est idéal pour les barres de navigation fixes, les boutons « retour en haut » et les bandeaux de cookies.

.retour {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
}

Une exception cruciale : si un ancêtre possède une propriété comme transform, filter ou perspective, cet ancêtre crée un nouveau bloc conteneur, et l'élément fixed devient fixé par rapport à cet ancêtre au lieu du viewport. Si un élément fixed dérive de manière inattendue, vérifiez si un parent a un transform.

position: sticky — entre relative et fixed

sticky est un hybride des deux. L'élément se place d'abord dans le flux normal comme relative ; au fil du défilement, dès qu'il atteint le seuil que vous avez défini (par ex. top: 0), il se fige comme fixed. Lorsque vous atteignez la fin de son conteneur, il est de nouveau libéré.

.titre-section {
  position: sticky;
  top: 0;
  background: #fff;
}

Quand sticky ne fonctionne pas, il y a trois causes habituelles :

Seuil manquant : vous devez fournir au moins l'une des valeurs top, bottom, left ou right ; sans cela, rien ne colle.
overflow sur un ancêtre : si un parent a overflow: hidden/scroll/auto, l'élément sticky se lie au contexte de défilement de ce conteneur et ne se comporte pas comme prévu.
Pas assez d'espace : un élément sticky ne reste collé que sur la longueur de son propre conteneur ; si celui-ci est court, l'effet ne dure qu'un instant.

z-index et contextes d'empilement

z-index ne fonctionne que sur les éléments positionnés (toute valeur autre que static) et sur les enfants flex/grid. Un z-index plus élevé fait passer un élément au premier plan — mais uniquement au sein du même contexte d'empilement (stacking context). Des propriétés comme transform, opacity (inférieure à 1) et filter créent un nouveau contexte d'empilement ; c'est pourquoi parfois même z-index: 9999 ne parvient pas à faire remonter un élément : il est piégé dans un contexte de priorité inférieure.

Quelle valeur, et quand ?

Besoin d'un petit décalage en gardant le flux ? → relative
Placer un élément dans le coin d'un autre ? → relative sur le parent, absolute sur l'enfant
Doit rester fixe à l'écran quel que soit le défilement ? → fixed
Doit coller pendant le défilement mais se libérer à la fin de la section ? → sticky

Questions fréquentes

Quelle est la différence entre absolute et fixed ?

Les deux retirent l'élément du flux normal. absolute se positionne par rapport à l'ancêtre positionné le plus proche et défile avec la page ; fixed se positionne par rapport au viewport et reste en place à l'écran même lors du défilement.

Pourquoi mon élément sticky ne colle-t-il pas du tout ?

Les deux raisons les plus fréquentes : vous n'avez pas fourni de valeur de seuil (comme top/bottom), ou un parent a overflow: hidden ou overflow: auto. Ce dernier désactive silencieusement le sticky.

Pourquoi mon z-index ne fonctionne-t-il pas ?

Généralement parce que l'élément est static (donnez-lui d'abord une valeur de position) ou parce qu'il est coincé dans un contexte d'empilement de priorité inférieure. Vérifiez les ancêtres pour transform, opacity ou filter.

Votre interface se casse à cause du positionnement ? On peut remettre de l'ordre dans les en-têtes sticky, les menus déroulants et les problèmes de superposition. Si vous avez un projet, contactez-moi.