Les Positions

Le positionnement en CSS est une notion essentielle pour organiser l'affichage de nos éléments sur une page.

Par défaut, les éléments suivent un flux naturel de haut en bas.

Mais parfois, on veut qu’un élément soit fixe, déplacé ou même superposé à d’autres.

C’est là qu’interviennent les différentes valeurs de POSITION.

STATIC :

position par défaut.

C'est la position de base :

les éléments s'affichent les uns après les autres, sans possibilité de les déplacer avec top, right, left, bottom.

RELATIVE :

L'élément reste dans le flux de lecture des éléments.

Il peut être déplacé par rapport à sa position initiale.

ABSOLUTE :

L'élément sort dans le flux de lecture des éléments.

Il peut être déplacé par rapport à son plus proche parent en position relative (ou autre position non "static"),

le body dnas le cas échéant.

Idéal pour les fenêtres modales, les tooltips.

FIXED :

L'élément sort dans le flux de lecture des éléments et reste fixé sur un position précise à l'écran même en cas de scroll.

Idéal pour un Call To Action omniprésent ou un icone ramenant en haut de la page.

STICKY:

Mix entre relative et fixed.

Il se comporte comme un élément en position relative puis fixed quand on atteint un point donné, au scroll par exemple.

Utilisé pour les navbar, les entêtes de tableaux, les menus latéraux.

Comme toujours, l'idéal est de faire des tests !