5 особливостей позиціонування CSS
У наші дні веб-розробники можуть створювати складні розкладки веб-сторінок, використовуючи різні техніки CSS. Деякі з цих технік мають довгу історію (флоати), інші (флексбокс) досягли популярності останніми роками.
У цій статті ми уважно розглянемо деякі маловідомі речі щодо CSS-позиціонування.
Перед початком, давайте коротко згадаємо основи різних типів позиціонування.
Огляд доступних способів позиціонування
Властивість CSS position визначає тип позиціонування елемента.
Опції для позиціонування
static – це значення властивості позиціонування за умовчанням. Ми повідомляємо, що цей елемент не використовує позиціонування — позиціонування застосовується лише якщо задати тип позиціонування, відмінний від дефолтного.
Для цього треба властивості position задати одне з наступних значень:
І лише після завдання позиціонування, можна використовувати властивості, що зміщують елемент:
- top
- right
- bottom
- left
- Початкове значення цих властивостей – ключове слово auto.
Потрібно враховувати, що якщо елемент має властивість position у значенні absolute або fixed , то він є абсолютно позиціонованим елементом. Також у позиціонованих елементів починає працювати властивість z-index, що визначає порядок накладання.
Відмінності між основними способами позиціонування
Тепер швидко розглянемо три базові різницю між доступними типами позиціонування:
- абсолютно (absolute) позиціоновані елементи повністю видаляються з потоку, їх місце займають найближчі сусіди.
- відносно позиціоновані (relative) і приклеєні (sticky) зберігають своє місце в потоці та їхні найближчі сусідине займають його. Однак відступи цих елементів не займають простір, а повністю ігноруються іншими елементами і це може спричинити накладення елементів.
- фіксовані ( fixed ) елементи (а фіксоване позиціонування є різновидом абсолютного) завжди позиціонуються щодо зони видимості (ігноруючи наявність позиціонування у предків), тоді як приклеєні елементи позиціонуються щодо найближчого предка зі скролінгом ( overflow:auto ). І лише за відсутності таких предків вони позиціонуються щодо зони видимості.
Докладніше це можна розглянути в демо:
Примітка: позиціонування “приклеєних елементів” досі є експериментальною технологією з обмеженою підтримкою у браузерах. Звичайно, за бажання ви можете використовувати поліфіл, щоб додати цей функціонал у браузер, але з урахуванням малої поширеності цю властивість у статті не обговорюватимуться.
Позиціонування елементів із абсолютним типом позиціонування
Я впевнений, більшість знає принцип роботи абсолютного позиціонування. Однак новачків багато в ньому може збентежити.
Тому я вирішив почати з нього при описі маловідомих особливостей позиціонування.
Отже, абсолютно позиціонований елемент зміщується щодо свого найближчого предка, що спозиційується. Звичайно, це працює, якщо у когось із предків position відрізняється від static — якщо елемент не має спозиційованих предків, він зміщується щодо зони видимості.
Це демонструється наступним прикладом:
У цьому демо зелений блок спочатку спозиційований абсолютно з нульовими відступами bottom: 0 і left: 0, його предку (червоному блоку) позиціонування не ставилося взагалі.
Однак, ми щодопозиціонували зовнішню обгортку (елемент із класом jumbotron). Зауважте, як змінюється позиціонування зеленого блоку при зміні типу позиціонування його предків.
Абсолютно позиціоновані елементи ігнорують властивість float
Якщо ми застосовуємо до плаваючого елемента абсолютне або фіксоване позиціонування, властивість float отримає значення none. З іншого боку, якщо ми поставимо відносне позиціонування, елемент залишиться плаваючим.
Погляньте на відповідне демо:
У цьому прикладі ми визначаємо два різні елементи, що спливають праворуч. Зауважте, що коли червоний блок стає абсолютно позиціонованим, він ігнорує значення властивості float , тоді як відносно спозиційований зелений блок зберігає значення float .
Абсолютно позиціоновані малі елементи стають блоковими
Рядковий елемент з абсолютним або фіксованим позиціонуванням набуває властивостей блокового елемента. Докладніше конвертація малих елементів у блокові описана в таблиці.
У цьому випадку ми створили два різні елементи. Перший (зелений блок) це блоковий елемент, а другий (червоний блок) - малий. Спочатку видно лише зелений блок.
Червоний блок не видно тому, що задані властивості width і height працюють тільки з блочними і рядково-блочними елементами, а так як в ньому немає контенту, у нього немає жодних розмірів.
При завданні червоного блоку абсолютного або фіксованого позиціонування, він стає блоковим і задані в ньому розміри блоку починають діяти.
У абсолютно позиціонованих елементів немає схлопування зовнішніх відступів
За умовчанням, коли два вертикальних зовнішніх відступу стикаються, вони об'єднуються в один, рівний максимальному з них. Ценазивається схлопування зовнішніх відступів.
Поведінка абсолютно позиціонованих елементів тут схожа на плаваючі елементи — їх відступи не поєднуються із сусідніми.
У цьому демо елементу заданий відступ 20 пікселів. Його відступ колапсує з відступом батьківського елемента, який також дорівнює 20 пікселям. Як бачите, тільки за абсолютного позиціонування схлопування не відбувається.
Але як ми можемо запобігти хлопуванню відступів? Нам потрібно помістити між ними якийсь роздільник.
Це може бути внутрішній відступ (padding) або кордон (border), їх можна застосовувати як до батьківського, так і дочірнього елемента. Інший варіант – додати клірфікс до батьківського елементу.
Позиціонування елементів з пікселями та відсотками
Чи використовували ви колись проценти замість пікселів для позиціонування елементів? Якщо відповідь так, то ви знаєте, що усунення елемента залежить від вибраних одиниць обчислення (пікселів або відсотків).
Це трохи бентежить, правда? Отже, спочатку подивимося, що каже специфікація про усунення у відсотках:
Зміщення у відсотках від ширини (для left і right) або висоти (top або bottom) батьківського блоку. Для приклеєних елементів зсув розраховується у відсотках від ширини (для left і right) або висоти (top або bottom) потоку. Допустимі негативні значення.
Як було сказано, при заданні усунення у відсотках, позиція елемента залежить від ширини та висоти його батька.
Демо показує цю різницю:
У цьому прикладі для усунення використовуються пікселі та відсотки. Звичайно, при завданні усунення в пікселях елемент зрушується туди, куди треба.
А якщо ми виберемо відсотки для усунення, результат залежатиме від розмірів батьківського елемента. Осьвізуалізація, що показує, як розраховується нова позиція:
Примітка: як ви, напевно, знаєте, властивість transform (разом з різними функціями translate) також дозволяє змінити позицію елемента. Але в цьому випадку при використанні відсотків розрахунок відбуватиметься на основі розміру самого елемента, а не його батька.