| Property | position: relative | position: absolute |
|---|---|---|
| Definition | The element is positioned relative to its original position in the normal document flow. | The element is positioned relative to its nearest positioned ancestor (or the <html> if no ancestor has position: relative, absolute, or fixed). |
| Affects Document Flow? | ✅ Yes, it remains in the document flow and occupies space. | ❌ No, it is removed from the document flow, meaning other elements behave as if it does not exist. |
| Reference Point | The original position of the element. | The nearest ancestor with position: relative, absolute, or fixed. If none, it is positioned relative to the <html> (viewport). |
Usage of top, right, bottom, left | Moves the element from its normal position without affecting surrounding elements. | Moves the element relative to the nearest positioned ancestor, completely detached from the normal document flow. |
| Example | ✅ Used when you want to shift an element slightly from its normal position while keeping the surrounding layout intact. | ✅ Used when you need to place an element precisely, often for overlays, tooltips, dropdowns, etc. |
Example of position: relative
cssCopyEdit.container {
position: relative;
width: 300px;
height: 200px;
background: lightblue;
}
.child {
position: relative;
top: 20px;
left: 30px;
background: yellow;
}
📌 Result:
- The
.childelement moves 20px down and 30px right from its normal position inside.container. - Other elements are not affected.
Example of position: absolute
cssCopyEdit.container {
position: relative; /* Acts as the reference for absolute positioning */
width: 300px;
height: 200px;
background: lightblue;
}
.child {
position: absolute;
top: 20px;
left: 30px;
background: yellow;
}
📌 Result:
- The
.childelement is positioned 20px down and 30px right, but relative to.container(not its normal position). - If
.containerdid not haveposition: relative, the.childwould be positioned relative to the entire page (viewport).
Key Takeaways
relativekeeps the element in flow, moving it slightly from its original position.absoluteremoves the element from flow and positions it relative to the closest positioned ancestor.
