В чем плюсы и минусы Translate относительно абсолютного позиционирования?

`transform: translate` для перемещения выигрывает у абсолютного позиционирования (`top`/`left`) в производительности анимаций, но абсолютное позиционирование гибче для точного размещения в потоке.

translate — плюсы

• Производительность анимаций — transform обрабатывается на этапе composite (GPU), не вызывает reflow/repaint. Абсолютное top/left при анимации вызывает reflow (дорого).

/* Плавно, на GPU */
.box { transform: translate(100px, 50px); }

• Плавность 60 FPS — идеально для анимаций и трансформаций.
• Не влияет на layout — элемент визуально сдвигается, но его место в потоке сохраняется.

translate — минусы

• Не убирает элемент из потока — сдвиг только визуальный, исходное место занято.
• Субпиксельное сглаживание текста может слегка размывать.

Абсолютное позиционирование — плюсы

• Вынимает из потока — элемент не влияет на соседей, точное размещение относительно родителя.
• Подходит для статичного размещения (оверлеи, тултипы, бейджи).

Абсолютное — минусы

• Анимация дорогая — изменение top/left вызывает reflow.
• Нужен position: relative у родителя.

Как выбирать

• Анимация/движение → transform: translate (GPU, плавно).
• Точное статичное размещение вне потока → position: absolute.

Коротко для собеседования

translate анимируется на GPU (composite, без reflow) — плавно и производительно, но не убирает элемент из потока (сдвиг визуальный). Абсолютное позиционирование вынимает из потока для точного размещения, но анимация top/left вызывает reflow (дорого). Движение — translate, статичное размещение — absolute.