5 речей, які Ви не знали про CSS позиціонування

В наші дні фронт-енд розробники можуть створювати складні макети сторінок, користуючись різними методами компонування CSS. Деякі з цих методів мають довгі історії (наприклад float) в той час, як деякі завоювали свою популярність за декілька років (наприклад flexbox).

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

Перед тим, як перейдемо до роботи, давайте швиденько нагадаємо типи позиціонування.

Огляд доступних типів CSS позиціонування

Властивість position дозволяє задати тип позиціонування елемента.

Варіанти позиціонування CSS

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

Для цього ми можемо використовувати такі значення:

• relative

• absolute

• fixed

• sticky

Тільки після цього ми можемо використовувати параметри відступів для вашого елемента:

• top

• right

• bottom

• left

• Початковим значенням цих властивостей є auto

Зауважте, що елемент властивістю position якого є absolute або fixed називається абсолютно позиціонованим елементом. Крім того, зверніть увагу, що позиціонований елемент може використовувати властивість z-index, щоб вказати порядок його стека.

Основні відмінності між властивостями позиціонування

Тепер давайте швиденько пройдемо три основні відмінності властивостей позиціонування:

• absolutе позиціонований елемент повністю видаляється з нормального потоку. Сусідні елементи займають простір цього елемента.

• Щодо relative або sticky, то вони зберігають свій простір. Сусідні елементи не займають відведене місце цього елемента. Його відступи не займають місця. Вони повністю ігнорують інші елементи, отже вони можуть перекривати один одного.

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

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

Дізнайтеся, як всі ці типи працюють в наступному демо:

Примітка: липкий тип позиціонування, як і раніше є експерементальним з обмеженою підтримкою браузерів. Звичайно, якщо хочете, Ви можете використовувати polyfill, щоб додати цю "функцію" до браузерів, але нативно вони її не підтримують. Через ці вади ми не будемо приймати цей тип до уваги в іншій частині цієї статті.

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

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

Тому я вирішив включити його в список маловідомих понять, які розглядаються в цій статті.

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

Для того щоб зрозуміти це краще, давайте поглянемо на невеличкий демо-приклад:

У цій демо-версії, ми представляємо зелений кружечок як абсолютно позиціонований елемент з відступами bottom: 0 та left: 0. Крім того ми не вказуємо тип позиціонування для його прямого батька (червоної коробочки).
Ми відносно позиціонуємо зовнішню обгортку (тобто елемент з класом jumbotron).

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

Абсолютно позиціоновані елементи та властивість float

Якщо елемент має float: right/left і ми надаємо абсолютний або фіксований тип позиціонування то float набуває значення float: none. У випадку коли ми встановлюємо елементу тип позиціонування relative то властивість float зберігає задане значення.

Погляньте на демо:

У цьому прикладі ми розміщали два елементи з властивостями float: right. Зверніть увагу на те, що, коли червона коробочка набуває тип позиціонування absolute, вона ігнорує значення властивості float, а зелена коробочка зберігає значення.

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

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

Нижче приклад:

В цьому прикладі ми маємо два елементи. Перший з них (зелена коробочка) є блочним елементом (тобто div). Другий (червона коробочка) є інлайн елементом (тобто span). Зверніть увагу на те, що спочатку ми бачимо тільки зелену коробочку.

Ми не бачимо червону коробочку тому що ми надали їй widht та height властивості, які можуть бути застосовані тільки до блочних і інлайн елементів. Крім того, це порожній елемент (тобто він не містить вкладених елементів, як текстові вузли).

Зверніть увагу на те, що якщо ми встановлюємо тип позиціонування absolute або fixed, елемент з׳являється тому, що він веде себе як елемент рівня блоку.

Поведінка полів при абсолютному позиціонуванні елемента

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

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

Невеличкий приклад:

У цій демо-версії, спочатку елемент має відступи в 20px. Крім того, його верхній відступ конфліктує з верхнім краєм батька, який також має top: 20px. Як Ви можете бачити тільки тоді коли ми абсолютно позиціонували елемент, верхній край не руйнується з відповідним запасом предка.

Але, як ми можемо запобігти колапсу полів? Що ж, ми повинні додати щось, що буде розділяти їх.
Наприклад додамо трохи до margin або border (ми повинні застосувати це правило до батьківського або дочірнього елементу). Інший варіант полягає в додаванні класу clearfix (в нашому прикладі) до батьківського елементу.

Піксельне та відсоткове позиціонування елементів

Ви коли-небуть використовували відсотки замість пікселів для відступів? Якщо відповідь так, то ви, можливо, помітили, що зміщення бувають різними в залежності від одиниць (тобто пікселів або відсотків), які Ви обираєте.

Здається це трохи збиває з пантелику, чи не так? Отже давайте спочатку подивимося, на відступи які оголошені в відсотках:

Зсув являє собою відсоток від ширини блоку (для left або right) або висоту (для top та bottom). Для "липко" розташованих елементів, відступи являють собою відсоток від корневої ширини (для leftабо right) або висоти ( для top або bottom). Негативні значення дозволені.

Це, так би мовити, до тих пір, як ми визначаємо значення зміщення в процентах, положення цільового елемента залежить від ширини (для left або right) і висоти (для top або bottom) його батька.

А ось все таки демонстрація цієї різниці:

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

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

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

Висновок

Я сподіваюсь, що ця стаття допомогла вам зрозуміти метод позиціонування CSS і висвітлила вам кілька концепцій, які можуть заплутати Вас. Я бува радий поділитися з Вами своїми знаннями. Буду щасливий, якщо ви також поділитися ними в коментарях. Дякую за увагу!