Générateur de la propriété CSS position

Basculez entre les 5 valeurs CSS de position (static, relative, absolute, fixed, sticky) via une interface graphique, observez en direct l'effet de top/right/bottom/left et z-index, puis générez le code CSS gratuitement.

Astuces

Passez à position: relative et définissez top/left pour décaler visuellement la Boîte B de sa position d'origine — remarquez que la Boîte C (l'élément suivant) ne bouge pas du tout.
En passant à absolute ou fixed, la Boîte B est entièrement retirée du flux normal, ce qui fait remonter la Boîte C pour combler l'espace laissé vacant.
z-index détermine l'ordre d'empilement des éléments qui se chevauchent, mais n'a aucun effet sur un élément en position: static — changez d'abord position avant de tester « Définir z-index ».
position: sticky ne fonctionne qu'à l'intérieur d'un conteneur avec défilement. Faites défiler le cadre d'aperçu lui-même pour voir l'élément se figer en cours de route.
Le code CSS généré peut être copié-collé directement dans votre propre feuille de style — testez-le sur une vraie page pour vérifier que le rendu est identique.

Questions fréquentes

absolute se positionne par rapport à l'ancêtre positionné le plus proche (le parent le plus proche dont la position n'est pas static) ; s'il n'en existe aucun, l'élément finit par se référer au bloc englobant initial de la page. fixed, en revanche, se positionne toujours par rapport à la fenêtre d'affichage du navigateur, donc il reste au même endroit à l'écran même quand la page défile.

Les causes les plus fréquentes sont un élément parent avec overflow: hidden ou overflow: auto, un parent dont la hauteur dépasse à peine celle de l'élément sticky lui-même (sans marge pour se figer), ou simplement l'oubli de définir un décalage comme top. De plus, l'effet de sticky reste limité au conteneur parent, qui doit donc réellement constituer une zone de défilement.

relative décale visuellement un élément par rapport à la position qu'il aurait occupée en tant qu'élément normal en position: static, selon les valeurs de top/right/bottom/left définies. Le point essentiel est que l'espace initialement occupé dans la mise en page reste réservé — c'est la grande différence avec absolute, qui retire complètement l'élément du flux.

z-index n'affecte que les éléments qui ne sont pas en position: static (donc relative, absolute, fixed ou sticky). Il peut aussi ne pas se comporter comme prévu si un élément parent crée son propre contexte d'empilement — par exemple en utilisant transform ou opacity en plus de position —, car le z-index des enfants est alors limité à ce contexte.

L'astuce classique consiste à ajouter position: relative à l'élément parent que vous souhaitez utiliser comme référence. Il n'est même pas nécessaire de définir de valeurs de décalage : ajouter simplement position: relative en fait un « élément positionné », et tout descendant en absolute se positionnera alors par rapport à ses bords intérieurs.

Anecdote — Le long chemin vers la standardisation de position: sticky

Le CSS dispose de static, relative, absolute et fixed depuis ses débuts, mais créer un en-tête ou une barre latérale qui ne se fige qu'après avoir défilé au-delà d'un certain point nécessitait longtemps de surveiller les événements de défilement en JavaScript et de basculer manuellement vers position: fixed. Il n'existait aucun moyen d'exprimer ce comportement uniquement avec du CSS.

L'idée de position: sticky a en fait été proposée dès 2012 dans la spécification CSS Positioned Layout Module Level 3, mais s'est révélée difficile à bien implémenter. Safari en a livré une première version préfixée (-webkit-sticky) vers 2013, Chrome n'a pris en charge le mot-clé standard sticky qu'en 2017, et il a fallu attendre environ 2020 pour que tous les grands navigateurs, dont Firefox, l'implémentent de manière fiable et cohérente.

Techniquement, le comportement de sticky qui « se fige en cours de défilement » se décrit le mieux comme un hybride entre relative et fixed : l'élément se comporte comme relative en temps normal, puis comme fixed dès que la position de défilement atteint le décalage défini. Ce basculement ne se déclenche que dans la plage de défilement de l'élément parent — ce qui explique pourquoi sticky semble si souvent « ne pas fonctionner » quand l'overflow ou la hauteur du parent fait obstacle.

Aujourd'hui, sticky est devenu une technique incontournable du design web : fixer la ligne d'en-tête d'un tableau, garder une table des matières visible pendant le défilement, et bien d'autres usages. Éliminer le besoin d'une écoute du défilement en JavaScript a représenté un vrai gain, tant en performance qu'en simplicité du code.

Voir toutes les anecdotes

Générateur de la propriété CSS position

Astuces

Questions fréquentes

Quelle est la différence entre absolute et fixed ?

Pourquoi position: sticky ne fonctionne-t-il pas ?

Par rapport à quoi position: relative se positionne-t-il exactement ?

Pourquoi z-index ne change-t-il pas l'ordre d'empilement même après l'avoir défini ?

Comment définir le bloc englobant par rapport auquel un élément absolute se positionne ?

Anecdote — Le long chemin vers la standardisation de position: sticky