От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я расскажу вам, чем отличается translate от position.
Видеоурок и его текстовую версию по translateX вы найдете здесь.
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.
|
1 2 3 4 5 |
.thing { position: relative; top: 100px; left: 50px; } |
В примере выше элемент будет сдвинут на 100px вниз и на 50px вправо. Очень похожий результат получится при использовании свойства transform:translate(x,y). Код выше можно переписать так:
|
1 2 3 |
.thing { transform: translate(100px,50px); } |
В этом случае мы сдвигаем координаты элемента на 100px по оси Х и на 50px по оси У. Конечный результат ничем не отличается от предыдущего. Зачем же нам два способа для одного и того же? В данных подходах есть различия…
Поддержка в браузерах
Position относится к CSS2, а transform – к CSS3. Поддержка данных свойств в браузерах разная. 2D трансформации не поддерживаются в IE8 и ниже. Если вам необходимо поддерживать старые версии IE, свойство transform вам не поможет.
GPU ускорение
Свойство transform по возможности использует аппаратное ускорение. Если к элементу применяется анимация или плавные переходы, у translate есть преимущества в производительности.
Если в переходах или keyframe анимации есть этапы с передвижением элементов, лучше используйте translate. Касается как абсолютного, так и относительного позиционирования. Более подробно эту тему можно изучить в видео Пола Айриша. В нем также объясняется, как производились замеры производительности.
Разное поведение процентных значений
Одно из главных отличий двух методов размещения элементов заключается в том, как они реагируют на процентные значения.
Разберем разметку и стили:
|
1 2 |
<div class="box position"></div> <div class="box transform"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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 добиться гибкого вертикального центрирования.
Оба метода размещения элементов можно использовать для решения схожих задач, однако у них есть существенные отличия. Используя сильные стороны обоих подходов, можно получить по-настоящему мощный набор инструментов.
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
