В чём разница между relative, fixed, absolute и static позиционированием?

Question

Accepted Answer

## Карта режимов
`position` меняет схему смещения и containing block.

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

```css
.badge {
  position: absolute;
  top: 0;
  right: 0;
}
```

## Итог
Static/relative — в потоке; absolute/fixed — вынуты. Relative часто нужен как «рамка» для absolute.