Совет AtoZ CSS: разница между переводом и относительным положением

Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст для соответствующего видео о translateXздесь .

Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье мы добавили краткие советы о различиях между translateposition

Х для translateposition

Существует несколько свойств CSS для размещения элементов на странице. К ним относятся свойства макета большого изображения, такие как floatmarginpaddingpositiontranslate()

На первый взгляд, position:relativetransform:translate()

В чем разница между translateposition:relative

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

Если мы устанавливаем position:relativeабсолютно позиционирующих элементов внутри. Вероятно, это наиболее распространенное использование относительного позиционирования, но это не то, что мы обсуждаем здесь.

Если мы скомбинируем position:relativetopbottomleftright Элемент будет перемещен на новый слой, и его «порядок слоев» или его порядок наложения затем можно будет контролировать с помощью свойства z-index

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

В приведенном выше примере элемент будет перемещен на 100px50px

При использовании transform:translate(x,y) Тот же результат, что и выше, может быть достигнут с помощью следующего фрагмента:

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

В этом случае мы переводим координаты элемента на 50px100px Конечный результат визуально такой же, как в предыдущем примере position

Итак, почему у нас есть два способа сделать то же самое? Ну, есть некоторые различия между этими подходами …

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

positiontransform В результате существуют различия в поддержке браузеров, хотя на самом деле единственными браузерами, которые не поддерживают 2D-преобразования, являются IE8 и ниже.

Если вам нужно поддерживать старые версии IE, transform

 <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;
}