Ответ
Плюсы transform: translate():
- Не вырывает элемент из потока документа (не влияет на соседние элементы)
- Работает с процентными значениями относительно собственных размеров элемента
- Аппаратное ускорение (лучше для анимаций)
- Не вызывает рефлоу, только репинт
Минусы translate:
- Не влияет на поток документа (не может сдвигать другие элементы)
- Может быть сложнее для точного позиционирования в сложных макетах
Плюсы абсолютного позиционирования:
- Полный контроль над расположением относительно ближайшего позиционированного родителя
- Может влиять на поток документа (освобождает место)
Минусы абсолютного позиционирования:
- Вырывает элемент из потока
- Вызывает рефлоу при изменении позиции
- Проценты работают относительно родителя
/* Пример translate */
.element {
transform: translate(50%, -20px);
}
/* Пример absolute */
.element {
position: absolute;
top: 50%;
left: 20px;
}