Static and Relative Positioning

Start with normal flow, then move a box without removing its space

1. Static is the default

The top offset below has no effect because the middle box is static.
First
Static + top
Third

2. Relative keeps its original space

The orange box moves down and right, but the third box still respects its original place.
First
Relative
Third

Key comparison

  1. Static elements stay in normal flow and ignore offsets.
  2. Relative elements remain in normal flow.
  3. Offsets move the relative box visually, not its reserved space.
  4. Relative positioning can also anchor absolute descendants.

Important CSS

Relative moves a box without removing its normal-flow space.

.static-box { position: static; top: 24px; }
.relative-box { position: relative; top: 24px; left: 16px; }