Position Property

The position property changes how an element is placed relative to the normal document flow, combined with top/right/bottom/left offsets.

.static-box   { position: static; }   /* default — normal flow, offsets ignored */
.relative-box { position: relative; top: 10px; left: 20px; }
.absolute-box { position: absolute; top: 0; right: 0; }
.fixed-box    { position: fixed; bottom: 20px; right: 20px; }
.sticky-box   { position: sticky; top: 0; }

• static — the default; the element sits in normal document flow, and offset properties (top, left, etc.) have no effect.
• relative — stays in normal flow but can be nudged from its original position using offsets, without affecting surrounding elements. Crucially, it also becomes a positioning context for any absolutely positioned children.
• absolute — removed from normal flow entirely and positioned relative to its nearest ancestor with position set to anything other than static (or the page itself if none exists). Other elements behave as if it isn't there.
• fixed — positioned relative to the browser viewport and stays in place even when the page scrolls — commonly used for sticky headers or floating action buttons.
• sticky — behaves like relative until the page scrolls past a threshold, then "sticks" like fixed within its parent container — commonly used for table headers or section navigation.

A very common pattern: a relative parent containing an absolute child, used to precisely place a badge, icon, or overlay:

.card { position: relative; }
.badge { position: absolute; top: 8px; right: 8px; }

Without position: relative on .card, the badge would position itself relative to the page (or the next positioned ancestor further up), not the card — a very common beginner bug.