Position - Astuces CSS | CSS Almanach 2025

La positionpropriété peut vous aider à manipuler l'emplacement d'un élément, par exemple:

.element ( position: relative; top: 20px; )

Par rapport à sa position d'origine, l'élément ci-dessus sera maintenant poussé vers le bas de 20 pixels depuis le haut. Si nous devions animer ces propriétés, nous pouvons voir à quel point cela nous donne le contrôle (bien que ce ne soit pas une bonne idée pour des raisons de performances):

relativen'est que l'une des six valeurs de la positionpropriété. Voici les autres:

Valeurs

static: chaque élément a une position statique par défaut, donc l'élément restera fidèle au flux de page normal. Donc, s'il y a un ensemble d'index gauche / droite / haut / bas / z, il n'y aura aucun effet sur cet élément.
relative: la position d'origine d'un élément reste dans le flux du document, tout comme la staticvaleur. Mais maintenant, gauche / droite / haut / bas / z-index fonctionnera. Les propriétés de position «décalent» l'élément de sa position d'origine dans cette direction.
absolute: l'élément est supprimé du flux du document et les autres éléments se comportent comme s'il n'était même pas là alors que toutes les autres propriétés positionnelles fonctionneront dessus.
fixed: l'élément est retiré du flux du document comme des éléments absolument positionnés. En fait, ils se comportent presque de la même manière, seuls les éléments positionnés fixes sont toujours relatifs au document, pas à un parent en particulier, et ne sont pas affectés par le défilement.
sticky(expérimental): l'élément est traité comme une relativevaleur jusqu'à ce que l'emplacement de défilement de la fenêtre atteigne un seuil spécifié, auquel point l'élément prend une fixedposition où il est dit de rester.
inherit: la positionvaleur n'est pas en cascade, donc cela peut être utilisé pour le forcer spécifiquement, et inheritla valeur de positionnement de son parent.

Absolu

Si un élément enfant a une absolutevaleur, l'élément parent se comportera comme si l'enfant n'était pas du tout là:

.element ( position: absolute; )

Et lorsque nous essayons de définir d'autres valeurs telles que left,, bottomet rightnous constaterons que l'élément enfant ne répond pas aux dimensions de son parent, mais au document:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Pour que l'élément enfant soit positionné de manière absolue à partir de son élément parent, nous devons le définir sur l'élément parent lui-même:

.parent ( position: relative; )

Propriétés telles que maintenant left, right, bottomet topfera référence à l'élément parent, de sorte que si nous pouvons voir que nous faisons l'élément enfant transparent , il est assis juste en bas du parent:

Fixé

La fixedvaleur est similaire à absolutecar elle peut vous aider à positionner un élément n'importe où par rapport au document, mais cette valeur n'est pas affectée par le défilement. Voir l'élément enfant dans la démo ci-dessous et comment, une fois que vous faites défiler, il continue de coller au bas de la page:

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome	Firefox	C'EST À DIRE	Bord	Safari
4	2	7	12	3.1

Mobile / tablette

Chrome Android	Android Firefox	Android	Safari sur iOS
88	85	3	8

Collant

La stickyvaleur est comme un compromis entre les valeurs relativeet fixed. Au moment d'écrire ces lignes, il s'agit actuellement d'une valeur expérimentale, ce qui signifie qu'il ne fait pas partie de la spécification officielle et n'est que partiellement adopté par certains navigateurs. En d'autres termes, ce n'est probablement pas la meilleure idée de l'utiliser sur un site Web de production en direct.

Qu'est ce que ça fait? Eh bien, cela vous permet de positionner un élément par rapport à quoi que ce soit sur le document, puis, une fois qu'un utilisateur a défilé au-delà d'un certain point dans la fenêtre, de fixer la position de l'élément à cet emplacement afin qu'il reste affiché en permanence comme un élément avec un fixedévaluer.

Prenons l'exemple suivant:

.element ( position: sticky; top: 50px; )

L'élément sera positionné de manière relative jusqu'à ce que l'emplacement de défilement de la fenêtre atteigne un point où l'élément sera à 50pxpartir du haut de la fenêtre. À ce stade, l'élément devient collant et reste à une fixedposition en 50pxhaut de l'écran.

La démonstration suivante illustre ce point, où la navigation supérieure est le relativepositionnement par défaut et la deuxième navigation est définie stickytout en haut de la fenêtre. Veuillez noter que la démo ne fonctionnera que dans Chrome, Safari et Opera au moment de la rédaction de cet article.

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.