position: relative does two things.
- It lets
top,right,bottomandleftmove the element from its normal position. - It makes the element a reference point for any absolutely positioned child inside it.
1. Nudging
index.html
HTML
<style>
.box { padding: 10px; background: #d0e8f2; margin: 6px 30px 6px 0; }
.nudge { position: relative; top: -10px; left: 20px; background: #fdebd9; }
</style>
<div class="box">Box one</div>
<div class="box nudge">Box two: moved up 10px and right 20px</div>
<div class="box">Box three</div>The browser still reserves the original space for box two, so no other box moves. top: 10px means “move down 10px from where you would have been”, which feels backwards at first.
2. Being an anchor
In real projects, the second use is far more common. A relative parent says: “any absolute child should measure from me”.
index.html
HTML
<style>
.card { position: relative; border: 1px solid #ccc; padding: 24px 16px 16px; width: 240px; }
.badge { position: absolute; top: 8px; right: 8px; background: #d94a00; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
</style>
<div class="card">
<span class="badge">New</span>
<h3>The Slow Garden</h3>
</div>The badge sits in the card’s top-right corner because the card is relative. How that works is the topic of position: absolute.
warning
Using relative for layout shifts
Moving elements around with
top/left to line things up is fragile. Use margin, flexbox or grid for layout, and keep relative for anchoring and tiny adjustments.