What are the CSS position values?

Question

Accepted Answer

`position` controls how an element is placed and whether the offset properties (`top`/`right`/`bottom`/`left`) apply.

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: the key pairing

`absolute` positions an element relative to its **nearest ancestor that is positioned** (anything other than `static`). So you set `position: relative` on a parent to make it the reference point:

```css
.card {
  position: relative;   /* becomes the positioning context */
}
.badge {
  position: absolute;   /* positioned relative to .card */
  top: 8px;
  right: 8px;           /* pins the badge to the card's top-right corner */
}
```

This relative-parent / absolute-child pattern is everywhere: badges, dropdowns, tooltips, close buttons.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — locked to the viewport (always visible), e.g. a persistent navbar.
- **sticky** — acts relative until it hits the threshold (`top: 0`), then stays there while its container is in view — great for section headers.

## A common gotcha

`absolute`/`fixed` elements are **removed from normal flow**, so they don't reserve space — siblings act as if they aren't there, which can cause overlap. Plan for that (e.g. add padding to compensate for a fixed navbar).

## Why it matters

`position` is essential for overlays, sticky headers, modals, dropdowns, and badges.

The relative-parent/absolute-child relationship and the fixed-vs-sticky distinction are the practical core you use constantly.