<?xml version="1.0" encoding="utf-8"?>

CSS position property with the relative value

CSS position property with the relative value Bad Practice
CSS position property with the relative value Best Practice

Changing the position property to relative allows us to set where the element is on the page relatively to its default position in the flow of the page. The top, bottom, left, and right properties allow us to set the indentation, also called the offset, usually in units of length like px. You can use two properties like left and top to move the element diagonally.

In the example, setting the left and bottom offsets moves the image in the opposite direction — towards the top-right corner. The space where the element should have been if non-positioned stays unoccupied.

Improve your UX & Product skills with interactive courses that actually work