CSS от А до Я: разница между translate и position relative

CSS от А до Я: разница между translate и position relative

От автора: приветствую вас в нашей серии уроков 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.

.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. Касается как абсолютного, так и относительного позиционирования. Более подробно эту тему можно изучить в видео Пола Айриша. В нем также объясняется, как производились замеры производительности.

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

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

<div class="box position"></div> 
<div class="box transform"></div>
.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

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree