CSS Position: Relative and Absolute

Relative positioning offsets an element while preserving its original place in normal flow; absolute positioning removes it from normal flow.

position: relative keeps the element’s normal-flow space, and offset properties like top or left shift its painted position. A position: absolute element is taken out of normal flow and placed relative to its containing block, often established by the nearest positioned ancestor.

A common pattern is a card with position: relative and a badge positioned absolutely at top: 10px; right: 10px.

The second box keeps its layout space even though it moves visually.

HTML

<div class="relative-stack"><div class="item">First item</div><div class="item shifted">Second item</div><div class="item">Third item</div></div>

CSS

.relative-stack { display: grid; gap: 7px; max-width: 240px; }
.relative-stack .item { padding: 9px; background: #dbeafe; border-radius: 6px; }
.relative-stack .shifted { position: relative; left: 16px; top: 5px; background: #bfdbfe; }

Rendered output

Observe: The second item moves slightly but the grid still reserves its original slot.

Place a compact badge at the top-right of its own card.

HTML

<article class="position-card"><span class="position-badge">New</span><h3>Workshop pass</h3><p>Registration opens this week.</p></article>

CSS

.position-card { position: relative; min-height: 102px; max-width: 330px; padding: 20px; background: #f1f5f9; border-radius: 10px; }
.position-card h3 { margin: 0 56px 7px 0; }
.position-card p { margin: 0; }
.position-badge { position: absolute; top: 12px; right: 12px; background: #0f766e; color: white; border-radius: 999px; padding: 4px 9px; font-size: 12px; }

Rendered output

Observe: The badge sits over the card corner but is anchored by the card’s positioned containing block.

A positioned parent anchors its absolute descendant; otherwise the descendant may position relative to a different containing block.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Without a positioned ancestor, an absolute child may align against a distant ancestor or the initial containing block.
• Absolute positioning can overlap text; reserve space for overlays when needed.

Remove position:relative from the card and predict where the badge ends up; restore it before saving the example.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use relative for modest offsets and as a containing-block anchor; use absolute for overlays not part of normal flow.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.