X значит translate и position §

Существует множество CSS свойств, с помощью которых можно размещать элементы на странице. Среди таких свойств есть распространенные типа#float,#margin и#padding, а также более точные типа#position и#translate().

На первый взгляд, свойства position: relative и transform: translate() работают одинаково, однако есть несколько тонких различий, которые нужно знать, чтобы уметь подбирать правильное свойство.

Чем отличается translate от position: relative? §

В этой статье мы разберем различия между этими методами по размещению элементов, однако сначала давайте узнаем, что делают эти свойства.

Задав свойство position: relative на элементе, мы создаем границы для дочерних элементов с абсолютным позиционированием. Это самый распространенный способ применения, но мы поговорим о другом.

Если использовать свойство position: relative вместе с одним из свойств смещения top, bottom, left или right, можно сдвинуть элемент со своего места в макете, сохранив изначально занимаемое им пространство. Элемент переместится на новый слой. Порядок слоев или стека можно контролировать с помощью свойства#z-index.

.thing {
  position: relative;
  top: 100px;
  left: 50px;
}

В примере выше элемент будет сдвинут на 100px вниз и на 50px вправо. Очень похожий результат получится при использовании свойства transform:translate(x,y). Код выше можно переписать так:

.thing {
  transform: translate(100px,50px);
}

В этом случае мы сдвигаем координаты элемента на 100px по оси Х и на 50px по оси У. Конечный результат ничем не отличается от предыдущего. Зачем же нам два способа для одного и того же? В данных подходах есть различия…

Поддержка в браузерах §

Position относится к CSS2, а transform – к CSS3. Поддержка данных свойств в браузерах разная. 2D трансформации не поддерживаются в IE8 и ниже. Если вам необходимо поддерживать старые версии IE, свойство transform вам не поможет.

GPU ускорение §

Свойство transform по возможности использует аппаратное ускорение. Если к элементу применяется анимация или плавные переходы, у#translate есть преимущества в производительности.

Если в переходах или keyframe анимации есть этапы с передвижением элементов, лучше используйте translate. Касается как абсолютного, так и относительного позиционирования. Более подробно эту тему можно изучить в видео Пола Айриша. В нем также объясняется, как производились замеры производительности.

Разное поведение процентных значений §

Одно из главных отличий двух методов размещения элементов заключается в том, как они реагируют на процентные значения.
Разберем разметку и стили:

.box {
  width: 200px;
  height: 200px;
}
 
.position {
  position: relative;
  left: 50%;
  background: red;
}
 
.transform {
  transform: translateX(50%);
  background: blue;
}

Оба элементы сдвинуты от левого края на 50%. Левый край красного квадрата сдвинут на 50% от края родительского контейнера. Левый край голубого квадрата сдвинут на 100px от левого края родительского контейнера. 50% от 200px будет 100px. Если задать процентное значение в свойстве translate, значение вычисляется относительно ширины или высоты элемента.

Объединение position и translate §

Последнее, на что стоит обратить внимание – так как свойства position и transform – это разные свойства, мы можем использовать их вместе. Мы можем поместить элемент в определенное место при помощи абсолютного позиционирования, а потом изменить position при помощи transform.

Примером могут послужить спозиционированные элементы, которые двигаются сверху вниз или слева направо. Или можно при помощи позиционирования и translate добиться гибкого вертикального центрирования.

Оба метода размещения элементов можно использовать для решения схожих задач, однако у них есть существенные отличия. Используя сильные стороны обоих подходов, можно получить по-настоящему мощный набор инструментов.

Использование transform: translate(x,y); значительно сокращает время рисования элементов с переходами CSS. Однако position: absolute; top/left будет быстрее, если использовать его для элементов без переходов.