Чем отличаются `position: absolute`, `relative`, `fixed` и `static`?

Question

Accepted Answer

## Сравнение

| Значение | Относительно чего позиционируется | В потоке |
|---|---|---|
| `static` | обычный поток, `top/left` не работают | да |
| `relative` | сдвиг от своей normal position; остаётся «место» | да (резерв) |
| `absolute` | ближайший positioned предок (`relative`/`absolute`/`fixed`/`sticky`) или initial containing block | нет |
| `fixed` | обычно viewport (иное при filter/transform у предка) | нет |

```css
.parent { position: relative; }
.badge {
  position: absolute;
  top: 0;
  right: 0;
}
.toast { position: fixed; bottom: 1rem; right: 1rem; }
```

## Sticky

Отдельно: `sticky` — гибрид relative/fixed в пределах предка.

## Итог

Ключ — containing block и участие в потоке; `absolute` ищет nearest positioned ancestor.

Значение	Относительно чего позиционируется	В потоке
`static`	обычный поток, `top/left` не работают	да
`relative`	сдвиг от своей normal position; остаётся «место»	да (резерв)
`absolute`	ближайший positioned предок (`relative`/`absolute`/`fixed`/`sticky`) или initial containing block	нет
`fixed`	обычно viewport (иное при filter/transform у предка)	нет