CSS position : démo de static, relative, absolute, fixed et sticky | We.Inc
Passez un même élément de static à relative, absolute, fixed et sticky dans une démo défilante. Blocs conteneurs, inset, dépannage de sticky et centrage expliqués.
La propriété position détermine comment un élément est placé. static correspond au flux normal. relative le décale tout en conservant son espace. absolute le retire du flux et le place par rapport à l'ancêtre positionné le plus proche. fixed l'épingle au viewport. sticky défile normalement jusqu'à atteindre un seuil comme top: 0, puis reste en place.
Les cinq valeurs
Valeur
Dans le flux ?
Placé par rapport à
Reste dans le flux
Rien, top/left n'ont aucun effet
Reste dans le flux, son espace d'origine est conservé
Sa propre position normale
Retiré du flux
La padding box de l'ancêtre positionné le plus proche
Retiré du flux
Le viewport, sauf si un ancêtre a transform, filter ou équivalent
Reste dans le flux
L'ancêtre défilant le plus proche, à l'intérieur de son parent
La démo ci-dessous contient une boîte orange dans une zone défilante. Changez sa valeur de position, déplacez les décalages, faites défiler et observez par rapport à quoi elle est mesurée. Suivent un guide des blocs conteneurs, une liste de vérification pour un sticky qui ne colle pas, et le raccourci inset.
Choisissez une valeur de position pour la boîte orange.
Réglez top et left, et activez ou désactivez le parent positionné pour voir quelle boîte absolute utilise.
Faites défiler la démo pour comparer fixed et sticky.
Copiez le CSS qui correspond à ce que vous voyez.
Mettez position: relative sur une carte : les enfants en absolute utilisent alors cette carte comme cadre. Ce seul modèle couvre la plupart des badges et superpositions.
Préférez inset: 0 à l'écriture séparée de top, right, bottom et left.
Un élément fixed placé dans un élément qui a transform, filter, perspective ou contain: paint n'est plus fixé à l'écran. Déplacez-le à la fin du body, ou affichez-le dans un portal.
Les éléments positionnés s'affichent par défaut au-dessus des éléments static. N'utilisez z-index que lorsque deux éléments positionnés se chevauchent.
Questions fréquentes
Quelle est la différence entre absolute et relative ?
relative décale visuellement un élément mais laisse son espace d'origine dans la mise en page, rien autour ne bouge donc. absolute retire complètement l'élément de la mise en page, les voisins comblent le vide, et top ou left sont mesurés depuis l'ancêtre positionné le plus proche plutôt que depuis l'endroit où il aurait été.
Pourquoi position: sticky ne fonctionne-t-il pas ?
Les causes habituelles sont une valeur top manquante, un ancêtre avec overflow hidden ou auto, ou un parent qui n'est pas plus haut que l'élément sticky. Parcourez la liste de vérification de cette page dans l'ordre ; les deux premiers points couvrent la plupart des cas.
Par rapport à quoi absolute est-il positionné ?
Par rapport à son bloc conteneur : la padding box de l'ancêtre le plus proche dont la position est autre que static. Les ancêtres avec un transform, un filter ou certaines valeurs de contain comptent aussi. S'il n'y en a aucun, c'est le bloc conteneur initial, qui a la taille du viewport.
Pourquoi mon en-tête fixed bouge-t-il avec la page ?
Un ancêtre a un transform, perspective, filter, backdrop-filter, will-change: transform ou contain: paint. Chacune de ces propriétés transforme cet ancêtre en bloc conteneur pour les descendants fixed, l'en-tête est donc fixé à lui au lieu de l'écran.
Qu'est-ce que inset en CSS ?
Un raccourci pour top, right, bottom et left, qui suit le même schéma de une à quatre valeurs que margin. inset: 0 étire un élément positionné sur tout son bloc conteneur. inset-inline et inset-block définissent les paires pour chaque axe.
Le bloc conteneur, en termes simples
Chaque décalage a besoin d'un rectangle de référence. Pour les éléments static et relative, c'est la content box du parent. Pour absolute, c'est la padding box de l'ancêtre positionné le plus proche, le padding de la carte ne pousse donc pas un enfant absolute vers l'intérieur.
Pour fixed, c'est normalement le viewport. Cela change quand un ancêtre reçoit transform, perspective, filter, backdrop-filter, contain: paint ou une valeur will-change correspondante : l'ancêtre devient la référence et l'élément défile avec lui. La démo de cette page utilise exactement cela pour que sa boîte fixed reste dans le cadre de la démo.
Centrer avec le positionnement absolute
Avec une taille connue, inset: 0 plus margin: auto place la boîte pile au centre et garde des bords nets au pixel près. Avec une taille inconnue, top: 50% et left: 50% suivis de translate(-50%, -50%) fonctionnent pour n'importe quel contenu.
Les deux retirent la boîte du flux, le parent ne s'agrandit donc pas autour d'elle. Si le parent doit s'adapter au contenu, utilisez plutôt un centrage en grid ou en flex.
Chaque valeur en détail
Valeurs de position
Valeur
Flux
Effet des décalages
Usage typique
Reste dans le flux
Ignorés
La valeur par défaut. Tout commence ici.
Reste dans le flux, son espace d'origine est conservé
Le décalent depuis sa position normale
Petits décalages, et ancrage pour les enfants en absolute.
Bandeaux de cookies, boutons flottants, modales plein écran.
Reste dans le flux
Seuil à partir duquel il colle
En-têtes de tableau, titres de section, menus latéraux.
Ce qui crée un bloc conteneur pour absolute et fixed
Ancêtres qui captent les descendants positionnés (selon MDN)
L'ancêtre a
Les enfants absolute l'utilisent ?
Les enfants fixed l'utilisent ?
position: relative, absolute, fixed ou sticky
Oui
Non
transform, perspective, rotate, scale ou translate autre que none
Oui
Oui
filter ou backdrop-filter autre que none
Oui
Oui
contain: layout, paint, strict ou content
Oui
Oui
will-change citant l'une de ces propriétés, comme transform ou filter
Oui
Oui
content-visibility: auto
Oui
Oui
Les modèles que vous utiliserez
Badge dans le coin d'une carte
La carte est l'ancêtre positionné. Des décalages négatifs font dépasser le badge à moitié hors du coin.
En-tête de tableau sticky
Le conteneur défile, donc th avec top: 0 colle à lui. Le fond empêche les lignes de transparaître.
Raccourci inset
Même schéma que margin : une valeur pour tous les côtés, deux pour vertical et horizontal, quatre dans le sens horaire en partant du haut.
Vous avez défini un seuil : top, bottom, left ou right. Sans seuil, sticky se comporte comme relative.
Aucun ancêtre entre l'élément et le conteneur défilant n'a overflow: hidden, auto ou scroll. Chacune de ces valeurs en fait le conteneur défilant, souvent un conteneur qui ne défile jamais. overflow: clip ne crée pas de conteneur défilant.
Le parent est plus haut que l'élément sticky. Celui-ci ne colle que tant que son parent est à l'écran, puis s'en va avec lui.
Dans une rangée flex ou grid, l'élément n'est pas étiré sur toute la hauteur. Ajoutez align-self: start pour qu'il ait de la place pour bouger.
L'élément sticky se trouve au-dessus du contenu qui défile sous lui. Donnez-lui un fond et un z-index si le contenu transparaît.
Le défilement se produit bien sur l'ancêtre que vous croyez. Vérifiez dans les DevTools quel élément porte la barre de défilement.
Bac à sable de position
valeur de position
Le parent a position: relative
Les décalages sont ignorés. La boîte est dans le flux normal, entre les paragraphes.
La boîte est dessinée décalée, mais l'espace qu'elle occuperait est conservé. Les voisins ne bougent pas.
Mesurée depuis le parent en pointillés, qui a position: relative.
Aucun parent positionné, elle est donc mesurée depuis la zone de démo défilante, l'ancêtre positionné suivant.
Épinglée au cadre de la démo pendant le défilement. Le cadre a un transform, ce qui en fait le bloc conteneur à la place de la fenêtre du navigateur.
Défile avec le texte jusqu'à se trouver à top pixels du haut du conteneur défilant, puis reste en place jusqu'à ce que son parent sorte de l'écran.
Zone de démo défilante
Faites défiler ce cadre. Le texte est du remplissage pour avoir de quoi défiler.
Parent
Premier paragraphe avant la boîte.
Paragraphe après la boîte. Observez s'il remonte quand la boîte quitte le flux.
Ligne {n} de contenu supplémentaire à faire défiler.
Contenu après le parent, ligne {n}.
Copier le CSS
Pourquoi fixed reste dans le cadre : le cadre a transform: translateZ(0). Tout transform fait d'un élément le bloc conteneur de ses descendants fixed. Sur une vraie page sans ancêtre de ce type, fixed s'attache à la fenêtre du navigateur.
Sticky ne fonctionne pas : liste de vérification
En-tête sticky caché derrière d'autres contenus ? Voir