Position Relative

Position Relative

position: relative lets you offset an element from its normal position using top, right, bottom, and left. The key: the element's original space is preserved in the flow.

Basic Syntax

.element {
    position: relative;
    top: 20px;    /* Move 20px DOWN from its normal position */
    left: 30px;   /* Move 30px RIGHT from its normal position */
}

How Relative Positioning Works

1. The element is first placed in its normal flow position
2. It's then offset visually by the top/left/bottom/right values
3. Its original space is preserved — other elements don't move
4. The element stays in the document flow

Visual Example

Normal position:       After position: relative; top: 20px; left: 30px;

┌──────────┐           ┌──────────┐  ← ghost of original space
│  Box A   │           │          │
├──────────┤           ├──────────┤
│  Box B   │              ┌──────────┐  ← Box B moved down and right
├──────────┤           ├──│  Box B   │──┤
│  Box C   │           │  └──────────┘  │
└──────────┘           │  Box C   │  ← hasn't moved!
                       └──────────┘

Box B moves, but Box C stays where it was — it doesn't fill the gap.

Offset Directions

Property	Moves Element
top: 20px	Down 20px from normal position
bottom: 20px	Up 20px from normal position
left: 30px	Right 30px from normal position
right: 30px	Left 30px from normal position

The directions are counter-intuitive: top pushes down, left pushes right. Think of it as "20px away FROM the top."

Negative Values

.element {
    position: relative;
    top: -10px;   /* Move UP 10px */
    left: -20px;  /* Move LEFT 20px */
}

Use Case 1: Fine-Tuning Position

.icon {
    position: relative;
    top: 2px;  /* Nudge icon down 2px to align with text */
}

/* Perfect for aligning inline icons with text baselines */

Use Case 2: Overlapping Elements

.card-image {
    position: relative;
    z-index: 1;
}

.card-badge {
    position: relative;
    top: -15px;   /* Overlap the image by 15px */
    left: 20px;
    z-index: 2;
}

Use Case 3: Anchor for Absolute Children

This is the most important use of position: relative:

.parent {
    position: relative;  /* Creates positioning context */
}

.child {
    position: absolute;  /* Positions relative to .parent */
    top: 10px;
    right: 10px;
}

/* Without position: relative on .parent, the absolutely
   positioned child would position relative to the viewport. */

We'll cover absolute positioning in detail in the next episode.

relative vs static

Feature	static (default)	relative
In document flow	✅ Yes	✅ Yes
top/left offsets	❌ Ignored	✅ Applied
z-index	❌ Ignored	✅ Works
Anchor for absolute children	❌ No	✅ Yes

Key Takeaways

• position: relative offsets an element visually while preserving its original space
• Other elements don't move — they respect the original position
• top: 20px means "20px from the top" — it moves the element down
• Most commonly used to create a positioning context for absolute children
• Enables z-index for controlling stacking order
• Use it for fine-tuning alignment (nudging icons, overlapping badges)