Le positionnement relatif nous permet de positionner un élément visuellement par rapport à sa position d'origine. En même temps, les éléments voisins ne prennent pas la place de l'élément.

position: relative;

Nous pouvons utiliser les propriétés top, left, bottom et right pour indiquer le déplacement visuel d'un élément par rapport à sa position initiale. Les valeurs peuvent être positives et négatives dans différentes unités (px, %, etc.). Exécutons l'exemple suivant pour voir quel effet nous pouvons obtenir :

Remarque

Il est essentiel de mentionner qu'il n'est pas nécessaire de spécifier toutes les propriétés top, bottom, left et right pour l'élément avec la valeur de position qui diffère de static. Il suffit de définir une propriété pour le positionnement vertical (top ou bottom) et une pour le positionnement horizontal (left ou right).