Позиційовані елементи

PreviousПозиціонування NextВластивість z-index

Last updated 1 year ago

Позиційовані елементи

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

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

Статичне позиціювання

Значення позиціювання за замовчанням - static. Елементи з позиціювання static розміщуються в потоку документа в порядку їх опису в HTML-коді. Більшість елементів зі статичним позиціюванням. У FlexBox елементи також позиційовані статично, якщо не вказані інші налаштування. Примусово вказувати статичне позиціювання зазвичай немає потреби.

.element {
  position: static;
}

Властивість position

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

position: static | relative | absolute | fixed | sticky | inherit

Елементи, значення властивості position яких відрізняється від static, називають «позиційованими елементами».

Позиціювання задають за допомогою ключових слів: top, left, bottom або right.

Відносне позиціювання

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

Такий елемент ніби підіймається і зміщується відносно свого положення.

Він може бути зміщений за допомогою властивостей top, right, bottom і left. Тобто задається один вертикальний і один горизонтальний параметр зміщення:

.item-relative {
  position: relative;
  bottom: 30px;
  right: 30px;
}

Відносне позиціонування не використовується самостійно. Його використовують в поєднанні з абсолютним позиціюванням. Абсолютно позиційовані елементи зміщують відносно відносно-позиціонованих елементів. Тому й така назва.

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

Завдяки позиціюванню absolute елемент розміщується відносно його найближчого позиціонованого (не static) батька або контейнера. Якщо немає такого батька, елемент буде позиційований відносно документа (<body>).

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

.item-absolute {
  position: absolute;
  top: 10px;
  left: 10px;
}

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

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

card {
  width: 200px;
  height: 300px;
  
  position: relative;
}

.text {
  position: absolute;
  top: 20px;
  left: 0;
}

Фіксоване позиціювання

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

.item-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

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

Липке позиціювання

Завдяки позиціюванню sticky елемент поводить себе як елемент з позиціюванням relative, до тих пір, поки його верхній або нижній край не досягає певного порогу відносно верхнього краю вікна перегляду (для top) або нижнього краю вікна (для bottom), після чого він поводиться як елемент з позиціюванням fixed.

Для реалізації липкого позиціювання потрібні три умови:

Встановлено позиціювання position: sticky.
У липкого елемента повинно бути встановлено положення, наприклад top: 0.
Елемент-контейнер повинен бути більшим по висоті за липкий елемент.

Покликання:

PreviousПозиціонування NextВластивість z-index

Last updated 1 year ago