Relative positioning allows you to move an element from its normal position without removing it from the page flow.
The element still keeps its original space, but you can shift it using top, right, bottom, and left values.
This is very useful when you want to slightly adjust the position of elements without breaking the layout.
In this example, the element moves 20 pixels down and 30 pixels to the right.
Even after moving, the space where the element originally was is still reserved.
This means other elements on the page do not move into its place.
This behavior makes relative positioning safe to use in most layouts.
Here, relative positioning is used to slightly move a label on a product card.
This is a common real-world use where you do not want to break the layout but still want better visual alignment.
Relative positioning is often used to adjust small UI elements like icons, badges, and labels.
Instead of using margin everywhere, developers use relative positioning to fine-tune alignment.
When should you use relative positioning?
Use it when:
- You want to move an element slightly
- You do not want to remove it from normal flow
- You need a reference point for absolute positioned children
In this example, the parent uses relative positioning so that the child element can be positioned absolutely inside it.
This is one of the most important layout techniques used in real websites.
Practice task
Create a card and:
- Move the title slightly using position relative
- Add a badge using position absolute inside the card
- Observe how both work together
Next lesson
In the next page, you will learn about absolute positioning and how it is used for overlays and floating elements.