# The position Property — CSS

Source: https://www.geekswithgeeks.com/en/css/css-position

> static, relative, absolute, fixed, and sticky positioning.

## Five values

`static` default flow. `relative` shifts from its normal spot, space still reserved. `absolute` removed from flow, placed relative to nearest positioned ancestor. `fixed` relative to the viewport. `sticky` toggles between relative and fixed on scroll.

## Absolute inside relative

The classic pattern: a `relative` parent gives an `absolute` child a reference box.

```css
.card {
  position: relative;
}

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

## sticky explained

`position: sticky` with `top: 0` acts normal until its scroll position reaches the threshold, then it "sticks" — great for section headers and table headers.

**Quiz:** An `absolute` element positions itself relative to what?

- [ ] The viewport, always
- [x] Its nearest positioned ancestor
- [ ] Its immediate sibling

*Answer:* Its nearest positioned ancestor. It looks up the tree for the closest ancestor with position other than static; if none, it falls back to the viewport.