CSS від А до Я: різниця між translate і position relative

1

Від автора: вітаю вас в нашій серії уроків 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. Стосується як абсолютного, так і відносного позиціонування. Більш докладно цю тему можна переглянути відео Підлоги Айриша. У ньому також пояснюється, як проводилися виміри продуктивності.

Різне поведінка процентних значень

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

.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 домогтися гнучкого вертикального центрування.

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