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?

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

GPU ускорение

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

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

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

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

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

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

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

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

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

Автор: Guy Routledge

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree