45. Positioning Scheme: Relative (The Offset)

position: relative is a minor deviation from the normal flow. The element stays in its place in the document flow, but you can use the offset properties (top, right, bottom, left) to shift it relative to its original position.

How Relative Positioning Works

1. The element reserves its original space in the layout (its 'ghost').
2. The element is then visually shifted using top/bottom/left/right relative to that original spot.
3. Crucially: Other elements on the page are unaware of the shift; they act as if the element is still in its starting position.

css .shifted-box { position: relative; /* Shifts the box 20px down from its original top edge / top: 20px; / Shifts the box 10px right from its original left edge */ left: 10px; background-color: orange; }

Primary Use Case: Establishing a Positioning Context

The most important use of position: relative is not to shift the element, but to create a positioning context for its children. A relatively positioned parent acts as the reference point for any absolutely positioned children inside it (Lesson 46).