Как перемещать элемент не задевая остальные элементы?

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

transform: translate (рекомендуется)

Визуально сдвигает элемент, но место в потоке сохраняется — соседи не двигаются:

.el { transform: translate(50px, 20px); }

• Не влияет на layout (соседи на месте).
• Анимируется на GPU (composite) — производительно, без reflow.
• Лучший выбор для перемещения/анимации.

position: absolute / fixed

Вынимает элемент из потока — соседи ведут себя, будто его нет:

.el {
  position: absolute;
  top: 20px;
  left: 50px;
}

• Элемент не занимает места, не сдвигает других.
• Нужен позиционированный родитель (relative).

Сравнение

• transform: translate — элемент остаётся в потоке (место занято), но визуально сдвинут; соседи не двигаются, потому что смещение не влияет на layout.
• absolute/fixed — элемент вынут из потока; соседи игнорируют его.

Что НЕ подходит

• margin влияет на соседей (сдвигает их). top/left у position: relative соседей не задевают (место сохраняется, как у transform), но вызывают пересчёт layout и хуже подходят для анимаций.

Как выбирать

• Анимация/перемещение без влияния на layout → transform: translate (GPU, плавно).
• Полностью вынуть из потока (оверлеи, драг) → position: absolute/fixed.

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

Элемент перемещают, не задевая других: transform: translate() (визуальный сдвиг, место в потоке сохраняется, соседи не двигаются, анимируется на GPU — лучший выбор) или position: absolute/fixed (вынуть из потока — соседи игнорируют). margin не подходит (сдвигает соседей); relative+top соседей не задевает, но вызывает reflow. Для анимации — transform.