Position Relative et Absolute en CSS

Petite présentation des propriétés CSS3 de positionnement d’un élément HTML. Il existe 4 types de positionnements différents. Voici un petit aperçu (ou un rappel) rapide des possibilités.

Position relative:

position: relative

-> Positionnement par rapport à son emplacement naturel
-> La place réservée à l’élément dans le flow est conservée mais il peut etre déplacer et chevaucher les autres éléments
(différence par rapport au float qui va sortir l’élément du flow normal)

Position Absolute:

position: absolute

-> Positionnement par rapport au premier élément parent qui n’est PAS en positionnement “static” (= positionnement par défaut)
-> On utilisera souvent un position: relative pour le parent afin de positionner l’élément souhaité (celui en absolute)

Position static:

position: static

-> Positionnement naturel d’un élément (Positionnement par défaut)
-> L’élément est à sa place normale dans le flow
-> Les propriétés top, bottom, left et right ne fonctionnent pas sur un élément en position static

Position Fixed:

position: fixed

-> Positionnement par rapport à la fenêtre du navigateur
-> L’élément en position fixed est retiré du flow normal