Какие значения `position` бывают в CSS и что они делают?

Question

Accepted Answer

## Сначала картина целиком

`position` задаёт схему позиционирования; смещения — `top`/`right`/`bottom`/`left` (+ `inset`).

## Значения

- **`static`** — обычный поток, inset/`z-index` не применяются как у positioned.
- **`relative`** — в потоке, можно сдвинуть относительно себя; якорь для absolute-потомков.
- **`absolute`** — вне потока, относительно ближайшего positioned предка.
- **`fixed`** — относительно viewport (с оговорками про ancestors с transform/filter).
- **`sticky`** — гибрид: в потоке, пока не «прилипнет» к краю контейнера.

```css
.header { position: sticky; top: 0; z-index: 20; }
```

## Итог

Перечислите пять значений и разницу absolute vs fixed vs sticky — классический junior-вопрос.