Встановлює спосіб позиціонування елемента щодо вікна браузера або інших об'єктів на веб-сторінці.
Коротка інформація
Значення за замовчуванням | static |
---|---|
Успадковується | Ні |
Застосовується | До всіх елементів |
Анімується | Ні |
Синтаксис
<code>position: absolute | fixed | relative | static | sticky
Позначення
Опис | Приклад | |
---|---|---|
<тип> | Вказує тип значення. | <розмір> |
A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
[ ] | Групує значення. | [ crop || cross ] |
* | Повторювати нуль або більше разів. | [,<час>]* |
+ | Повторювати один або більше разів. | <число>+ |
? | Вказаний тип, слово або група не є обов'язковим. | inset? |
{A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
# | Повторювати один або більше разів через кому. | <час># |
Значення
- 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
- Це поєднання відносного та фіксованого позиціонування. Елемент сприймається як позиціонований щодо, доки він перетинає певний поріг, після чого розглядається як фіксований. Зазвичай використовується для фіксації заголовка на одному місці, поки вміст, до якого належить заголовок, прокручується на сторінці.
Приклад
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>position</title> <style> .layer1 { position: relative; /* Відносне позиціонування */ background: #f0f0f0; /* Колір тла */ height: 200px; /* Висота блоку */ } .layer2 { position: absolute; /* Абсолютне позиціонування */ bottom: 15px; /* Положення від нижнього краю */ right: 15px; /* Положення від правого краю */ line-height: 1px; } </style> </head> <body> <div class="layer1"> <div class="layer2"> <img src="image/girl.jpg" alt="Дівчинка"> </div> </div> </body> </html>
Результат цього прикладу показаний на рис. 1.
Рис. 1. Застосування властивості position
Об'єктна модель
Об'єкт.style.position
Примітка
Браузер Safari підтримує значення -webkit-sticky.
Специфікація
Специфікація | Статус |
---|---|
CSS Positioned Layout Module Level 3 | Робочий проект |
CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
static, relative, absolute | 4 | 12 | 1 | 4 | 1 | 1 |
fixed | 7 | 12 | 1 | 4 | 1 | 1 |
sticky | 16 | 56 | 42 | 6.1 | 32 |
static, relative, absolute | 1 | 1 | 6 | 1 |
fixed | 1 | 1 | 6 | 1 |
sticky | 32 | 6.1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частини Так, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.