Relative

Definition

Positions an element relative to its normal (static) position in the document flow. Other elements will not adjust to fill the gap left by the element's shifted position.

Explain Like I'm New

Step 1: The browser places the box where it normally goes (Static). Step 2: Because it's Relative, it looks at the `top`/`left` coordinates and nudges the box. The secret: The box leaves behind a 'ghost' of itself in the original spot. All other elements on the page act as if the box never moved.

Real World Example

Nudging an icon slightly to the left so it aligns perfectly with text, without messing up the layout of the entire paragraph.

Common Use Cases

•Minor tweaks to positioning
•Acting as a 'Parent Container' for Absolute elements (Very important!)

Interactive Example

Interview Questions

basic

If you move a relatively positioned box down 50px, do the boxes below it move down too?

intermediate

What is the primary architectural use of `position: relative`?

Flash Cards

Question

Do other boxes move?

Click to reveal answer

Answer

No. They respect the original 'ghost' space of the moved box. The moved box will literally overlap and cover the boxes below it.

Question

Primary architectural use?

Click to reveal answer

Answer

To act as an anchor or container for `position: absolute` children. An absolute child bases its coordinates off the nearest ancestor that has a relative position.