Relatieve positionering maakt het mogelijk een element visueel te positioneren ten opzichte van zijn oorspronkelijke positie. Tegelijkertijd nemen de omliggende elementen de plaats van het element niet in.

position: relative;

Met de eigenschappen top, left, bottom en right kan de visuele verplaatsing van een element ten opzichte van de beginpositie worden aangegeven. De waarden kunnen positief of negatief zijn en verschillende eenheden hebben (px, %, enz.). Bekijk het volgende voorbeeld om het effect te zien:

Opmerking

Het is belangrijk om te vermelden dat het niet nodig is om alle top, bottom, left en right eigenschappen te specificeren voor het element met een andere positioneringswaarde dan static. Het is voldoende om één eigenschap voor verticale positionering (top of bottom) en één voor horizontale positionering (left of right) in te stellen.