Auteur: Jérôme Forget. Publié le 26 mars 2007.
Le type de positionnement le plus simple à comprendre et à utiliser est le positionnement relatif. Avec ce type de positionnement, un élément est simplement déplacé, avec les propriétés de décalage, par rapport à l'endroit où il se trouvait dans le flux normal du document.
Dans l'exemple suivant, une image est décalée vers le haut et vers la gauche :
img { position: relative; top: -20px; left: -20px; }
Dans cet autre exemple, un élément dans une liste est décalé vers la gauche :
li.a { position: relative; left: -1em; }
<ul>
<li>élément de liste</li>
<li>élément de liste</li>
<li class="a">élément de liste décalé</li>
<li>élément de liste</li>
</ul>
Lorsqu'un élément est positionné en relatif, il est décalé par rapport à l'endroit où il se trouvait mais l'espace qu'il occupait au départ demeure occupé. Même si l'élément est déplacé, l'espace qu'il occupait avant d'être positionné reste blanc et n'est pas occupé par le reste du contenu.
Le positionnement relatif est utile pour décaler ou superposer deux éléments, sans les positionner hors du flux normal du document. De façon générale, le positionnement relatif sera utilisé pour créer un bloc conteneur positionné qui servira de contexte de positionnement à d'autres éléments.