Чем абсолютное позиционирование отличается от `transform`?

Question

Accepted Answer

## Layout vs композиция

**`position: absolute`** (с `top`/`left`…) вынимает элемент из нормального потока (относительно nearest positioned ancestor), **участвует в layout** containing block, влияет на hit-testing и размеры контекста.

**`transform: translate(...)`** сдвигает **визуально** после layout: место в потоке обычно **сохраняется** (как у static/relative box), часто уходит на compositor-layer, хорошо для анимаций.

```css
.badge { position: absolute; top: 0; right: 0; }
.shake { transform: translateX(4px); }
```

`transform` создаёт containing block для fixed/absolute потомков и новый stacking context. Для микровзаимодействий предпочтительнее анимировать `transform`, а не `top/left`.