Функція translate()

Ще одна функція властивості transform - translate() , за допомогою якої можна перемістити елемент з його початкової точки. Функція приймає два параметри один для переміщення по осі X, другий по осі Y.

Можна вказати числові значення у будь-яких одиницях вимірювання довжини CSS. Якщо число позитивне, елемент зміщується вправо осі X, вниз осі Y. І, якщо число негативне, рух відбувається вліво і вгору відповідно.

Незалежно від того, куди і на яку відстань ви перемістите елемент, місце його початкового розташування в потоці документа буде зарезервовано за ним, інші елементи не зможуть його зайняти. На місці елемента, що переміщається, залишиться порожній простір, а сам елемент у зміщеному стані може накладатися або підкладатися під сусідні елементи. Який елемент буде перебувати вище, а який нижче, можна визначити за допомогою властивості z-index (воно буде розглянуто в книзі трохи пізніше).

У нашому прикладі елемент, що переміщається, ховається за сусідніми блоками:

Окремі функції для осей

Ви також можете керувати переміщенням елемента, використовуючи окремі функції translate для трьох осей translateX() , translateY() , translateZ() . Якщо в параметрі translateZ() вказано позитивне число, переміщення елемента відбувається вперед, якщо негативне назад.

Функція 3D

Деякі функції властивості transform мають додаткову 3D-версію себе, яка набуває трьох значень - для трьох осей. Так, у розширеній функції translate3d() можна вказати значення для X, Y та Z через кому. Такі ж варіації існують і в деяких раніше розглянутих функцій rotate3d() і scale3d().

Зверніть увагу: якщо у вас не працює translateZ() або інша аналогічна функція, де торкається вісь Z, не поспішайте панікувати. Справа в тому, що рух по осі Z буде помітним лише в тому випадку, якщо CSS встановлена ​​перспектива. Ми розберемо цю тему через урок.

2.4. CSS-позиціонування

CSS розглядає макет html-документа як дерево елементів. Унікальний елемент, який не має батьківського елемента, називається кореневим елементом. Модуль CSS-позиціонування описує, як будь-який з елементів може бути розміщений незалежно від порядку документа (тобто вилучений з потоку).

У CSS2 кожен елемент у дереві документа генерує нуль або більше блоків відповідно до блокової моделі. Модуль CSS3 доповнює та розширює схему позиціонування. Розташування цих блоків регулюється:

• розмірами та типом елемента,
• схемою позиціонування (нормальний потік, обтікання та абсолютне позиціонування),
• відносинами між елементами у дереві документа,
• зовнішньою інформацією (наприклад, розмір області перегляду, внутрішніми розмірами зображень тощо).

Схеми позиціонування

• Зміст:
• 1. Містить блок
• 2. Вибір схеми позиціонування: властивість position
• 3. Зміщення блоку: властивості top, right, bottom, left
• 4. Обтікання: властивість float
• 5. Управління потоком поруч із плаваючими елементами: властивість clear
• 6. Визначення контексту накладання: властивість z-index
• 6.1. Контекст накладання

У CSS блок елемента може бути розташований відповідно до трьох схем позиціонування:

Нормальний потік

Нормальний потік включає блоковий контекст форматування (елементи з display block, list-item або table), малий (вбудований) контекст форматування (елементи з display inline, inline-block або inline-table), і відносне і «липке» позиціонування елементів рівня блоку та рядки.

Обтікання

В обтікаючій моделі блок видаляється з нормального потоку і позиціонується вліво або вправо. Вміст обтікає праву сторону елемента з float: left та ліву сторону елемента з float: right .

Абсолютне позиціонування

У моделі абсолютного позиціонування блок повністю видаляється з нормального потоку і йому присвоюється позиція щодо блоку, що містить. Абсолютне позиціонування реалізується за допомогою значень position: absolute; та position: fixed; .

Елементом "поза потоком" може бути плаваючий, абсолютно позиціонований або кореневий елемент.

1. Містить блок

Положення та розмір блоку(ів) елемента іноді обчислюються щодо деякого прямокутника, званого містить блоком елемента (containing block). Загалом, що містить блок - це блок, який містить інший елемент. У разі нормального потоку кореневий елемент html є блоком для елемента body , який, у свою чергу, є блоком для всіх його дочірніх елементів і так далі. У разі позиціонування, що містить блок, повністю залежить від типу позиціонування. Містить блок елемента визначається наступним чином:

• Блок, що містить кореневий елемент, являє собою прямокутник — так званий початковий містить блок.
• Для некореневого елемента з position: static; або position: relative; містить блок формується краєм області вмісту найближчого батьківського блоку рівня блоку, комірки таблиці або рівня рядка.
• Містить блок елемента з position: fixed; є вікно перегляду.
• Для некореневого елемента з position: absolute; містить блоком встановлюється найближчий батьківський елемент зі значенням position: absolute/relative/fixed наступним чином:
  - якщо предок - елемент рівня блоку, що містить блок буде область вмісту плюс поля елемента padding ;
  - якщо предок - елемент рівня рядка, що містить блок буде область вмісту;
  - якщо предків немає, то містить блок елемента визначається як початковий містить блок.
• Для «липкого» блоку містить блоком є ​​найближчий предок з прокручуванням або вікно перегляду, інакше.

2. Вибір схеми позиціонування: властивість position

Властивість position визначає, який із алгоритмів позиціонування використовується для обчислення положення блоку.

Властивість не успадковується.

Щодо позиціонований блок зберігає свої розміри, включаючи розриви рядків та простір, спочатку зарезервований для нього.

Відносно позиціонований блок створює новий блок для абсолютно позиціонованих нащадків.

Відступи margin абсолютно позиціонованих блоків не схлопуються.

Абсолютно позиціонований блок створює новий блок для дочірніх елементів нормального потоку і нащадків з position: absolute; .

«Липкий» блок може перекривати інші блоки, а також створювати смуги прокручування у разі переповнення.

"Липкий" блок зберігає свої розміри, включаючи розриви рядків і простір, спочатку зарезервований для нього.

position: static; position: relative; position: absolute; position: sticky; position: fixed; position: initial; position: inherit;

3. Зміщення блоку: властивості top, right, bottom, left

Елемент вважається позиціонованим, якщо властивість position має значення, відмінне від static. Позиціоновані елементи генерують позиціоновані блоки і можуть бути розташовані відповідно до наступних чотирьох фізичних властивостей:

top: 10px; top: 2em; top: 50%; top: auto; top: inherit; top: initial;

Властивість top задає відстань, на яку верхній край абсолютно позиціонованого блоку (з урахуванням його margin) зміщується нижче верхнього краю блоку, що містить.Для відносно позиціонованих блоків визначає зміщення щодо верхнього краю самого блоку (тобто блоку задається позиція в нормальному потоці, а потім усунення цієї позиції відповідно до цієї властивості).

right: -10px; right: .5em; right: -10%; right: auto; right: inherit; right: initial;

Властивість right вказує відстань, на яку правий край абсолютно позиціонованого блоку (з урахуванням його margin) зміщений вліво від правого краю блоку, що містить. Для щодо позиціонованих блоків визначає зсув щодо правого краю самого блоку.

bottom: 50px; bottom: -3em; bottom: -50%; bottom: auto; bottom: inherit; bottom: initial;

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

left: 50px; left: 10em; left: 20%; left: auto; left: inherit; left: initial;

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

Позитивні значення зміщують елемент всередину блоку, а негативні - за його межі.

4. Обтікання: властивість float

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

При використанні float для елементів рекомендується задавати ширину. Тим самим браузер створить місце для іншого вмісту. Якщо для плаваючого елемента недостатньо місця по горизонталі, він зміщуватиметься вниз доти, доки не вміститься.При цьому інші елементи рівня блоку будуть ігнорувати його, а елементи рівня рядка зміщуватимуться вправо або вліво, звільняючи для нього простір і обтікаючи його.

Правила, що регулюють поведінку плаваючих боків, описуються властивістю float.

Властивість не успадковується.

float: left; float: right; float: none; float: inherit;

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

Плаваючі елементи можуть використовувати негативні відступи margin , щоб переміщатися за межі області вмісту батьківського елемента.

Властивість автоматично змінює значення властивості display на display: block для наступних значень: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значення inline-table змінює table .

Властивість не впливає на елементи з display:flex і display:inline-flex. Не застосовується до абсолютно позиціонованих елементів.

5. Управління потоком поруч із плаваючими елементами: властивість clear

Властивість clear вказує, які сторони блоку/блоків елемента не повинні прилягати до плаваючих блоків, які знаходяться вище у вихідному документі.У CSS2 і CSS 2.1 властивість застосовується лише до неплаваючих елементів рівня блоку.

Властивість не успадковується.

clear: none; clear: left; clear: right; clear: both; clear: inherit;

Для запобігання відображенню фону або меж під плаваючими елементами використовується правило.

6. Визначення контексту накладання: властивість z-index

У CSS кожен блок має позицію у трьох вимірах. Крім горизонтального і вертикального положення, блоки викладаються вздовж осі Z один над одним. Положення вздовж осі Z особливо важливе, коли блоки візуально накладаються один на одного.

Порядок, у якому дерево документа відображається на екрані, описується за допомогою контексту накладання. Кожен блок належить одному контексту накладання. Кожен блок у даному контексті накладання має цілий рівень, який є його положенням на осі Z щодо інших блоків у тому ж контексті накладання.

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

Властивість z-index дозволяє змінити порядок накладання позиціонованих елементів у разі, коли вони накладаються один на одного.

Властивість не успадковується.

z-index: auto; z-index: 0; z-index: 5; z-index: 999; z-index: -1; z-index: inherit; z-index: initial;

6.1. Контекст накладання

Якщо для елементів властивості z-index та position не задано явно, контекст накладання дорівнює порядку їх розташування у вихідному коді і браузер відображає елементи на сторінці в наступному порядку:

• Кореневий елемент , який містить усі елементи веб-сторінки.
• Блокові елементи, що не плавають і непозиціоновані.
• Плаваючі float непозиціоновані елементи в порядку їх розташування у вихідному коді.
• Рядкові непозиціоновані елементи (текст, зображення).
• Позиційовані position елементи в порядку їхнього прямування у вихідному коді. Останній із них буде розташований на передньому плані.

Властивість z-index створює новий контекст накладання. Воно дозволяє змінити порядок накладання позиціонованих елементів. Елементи будуть відображатися на сторінці в наступному порядку (якщо їм не задані властивості, що впливають на контекст накладання - opacity, filter, transform):

• Кореневий елемент , який містить усі елементи веб-сторінки.
• Позиціоновані елементи з негативним значенням z-index.
• Блокові елементи, що не плавають і непозиціоновані.
• Плаваючі float непозиціоновані елементи в порядку їх розташування у вихідному коді.
• Рядкові непозиціоновані елементи (текст, зображення).
• Позиціоновані елементи із значеннями z-index: 0; та z-index: auto; .