position
Оновлено: 15.12.2022
position
Встановлює спосіб позиціонування елемента відносно вікна браузера або інших об'єктів на веб-сторінці.
Коротка інформація
| Значення за замовчуванням | static |
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Ні |
Синтаксис
position: absolute | fixed | relative | static | stickyЗначення
| absolute | Абсолютне позиціонування. Вказує, що елемент абсолютно позиційований, при цьому інші елементи відображаються на веб-сторінці так, ніби абсолютно позиційованого елемента й немає. Положення елемента задається властивостями left, top, right і bottom, також на положення впливає значення властивості position батьківського елемента. Так, якщо у батьківського елемента значення position встановлено як static або батьківського елемента немає, то відлік координат ведеться від краю вікна браузера. Якщо у батьківського елемента значення position задано як relative, то відлік координат ведеться від краю батьківського елемента. |
| fixed | Фіксоване позиціонування. За своєю дією це значення близьке до absolute, але, на відміну від нього, прив'язується до зазначеної властивостями left, top, right і bottom точки на екрані і не змінює свого положення під час прокручування веб-сторінки. |
| relative | Відносне позиціонування. Положення елемента встановлюється відносно його початкового місця. Додавання властивостей left, top, right і bottom змінює позицію елемента і зсуває його в ту чи іншу сторону від початкового розташування. |
| static | Статичне позиціонування. Елементи відображаються як зазвичай. Використання властивостей left, top, right і bottom не призводить до будь-яких результатів. |
| sticky | Це поєднання відносного та фіксованого позиціонування. Елемент розглядається як позиціонований відносно, поки він не перетинає певний поріг, після чого розглядається як фіксований. Зазвичай застосовується для фіксації заголовка на одному місці, поки вміст, до якого належить заголовок, прокручується на сторінці. |
Приклад
Результат цього прикладу показано на рис. 1.
Об'єктна модель
Об'єкт.style.position
Примітка
Браузер Safari підтримує значення -webkit-sticky.