В наші дні фронт-енд розробники можуть створювати складні макети сторінок, користуючись різними методами компонування 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 і висвітлила вам кілька концепцій, які можуть заплутати Вас. Я бува радий поділитися з Вами своїми знаннями. Буду щасливий, якщо ви також поділитися ними в коментарях. Дякую за увагу!
Ще немає коментарів