Positioning

By default, every element is position: static — it flows normally on the page, one after another. The other three values change that in specific ways.

Example 1: relative — nudging without disrupting anything else

.icon { position: relative; top: -3px; }

relative nudges an element from where it would normally sit — here, 3px upward — without affecting where any other element on the page ends up. It's often used just to make small visual adjustments, like nudging an icon to align better with adjacent text.

Example 2: absolute — positioned relative to its nearest positioned ancestor

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

absolute removes an element from normal flow entirely and positions it relative to its nearest ancestor that has any position other than static — here, .card's position: relative makes it that anchor, so the badge sits pinned to the card's corner no matter where the card itself moves on the page. Forgetting to set position: relative on the parent is one of the most common positioning bugs — without it, the absolute element anchors to the entire page instead of the nearby card you meant.

Example 3: fixed — anchored to the browser window

.back-to-top { position: fixed; bottom: 20px; right: 20px; }

fixed positions relative to the browser window itself, so it stays in the same spot on screen even while the page scrolls — exactly what you want for something like a persistent "back to top" button.