Positioning

The position property controls how an element is placed on the page, relative to its normal location or another element.

Static — the default

Every element starts as position: static — it simply follows the normal document flow, top to bottom.

Relative

Shifts an element from where it would normally sit, without affecting the layout of elements around it. Try changing the top/left values:

Absolute

Removes the element from normal flow entirely and positions it relative to its nearest positioned ancestor (an ancestor with position set to anything other than static). Here, the card wrapper already has position: relative set — try changing where the badge sits:

Fixed

Similar to absolute, but positioned relative to the browser window itself — a fixed element stays in place even as the page scrolls. Commonly used for sticky headers or "back to top" buttons.