juniorCSS
Difference between absolute and relative positioning?
Updated Apr 28, 2026
Short answer
Relative positions an element relative to its normal position. Absolute positions it relative to its closest positioned ancestor.
Deep explanation
Position relative keeps the element in the normal document flow but allows you to offset it using top/right/bottom/left. Position absolute completely removes the element from the flow and places it exactly where specified relative to the nearest parent that has position: relative, absolute, or fixed.
Real-world example
Creating a notification badge on the top right corner of a user avatar.
Common mistakes
- Forgetting to add position: relative to the parent, causing the absolute child to position itself relative to the entire page body.
Follow-up questions
- What happens if an absolute element has no positioned ancestor?