css властивість position
Властивість position визначає тип позиціювання відносно вікна браузера або інших елементів: static, relative, absolute, fixed або sticky (статичний, відносний, абсолютний, фіксований або клейкий).
Властивість position використовується разом з top, right, bottom і left для позиціювання елементу в потрібному місці.
Розміри абсолютно позиціонованого елементу(absolute), який має встановлене значення auto для властивостей width і height, відповідають його вмісту. Тим часом, блок може займати всю можливу висоту батьківського елементу, якщо має встановлене значення 0 для top i bottom, а також невизначену висоту (auto). Таким чином також може бути розтягнутий по горизонталі: із визначеними left i right та невизначеною шириною.
Але в усіх інших випадках:
- якщо одночасно встановлене значення для
topibottom(й визначена висота), застосовуєтьсяtop(bottomігнорується);
- якщо одночасно встановлене значення для
leftiright(й визначена ширина), застосовуєтьсяleftякщо дляdirectioвстановлене значенняltr(значення без задання), іrightякщоrtr.
| Нотатка: | Браузер Safari підтримує значення |
Синтаксис
position: static|absolute|fixed|relative|sticky|initial|inherit;Властивість position може отримувати 7 значень:
staticЕлементи відображаються як зазвичай (в потоці формування документа). Використання властивостей
left,top,right,bottomтаz-indexне призводить до будь-яких результатів. Без задання.absoluteВидаляє елемент з загального потоку (місце, що звільнив елемент заповнюється іншими елементами) і вставляється відносно свого батьківського, не статично позиційованого елемента, якщо такого елемента немає, то їм вважається вікно браузера (При цьому ширина елемента, без задання, встановлюється за його вмістом). Нове місце розраховується за допомогою властивостей
left,top,rightтаbottomНа положення впливає значення властивості
positionбатьківського елемента. Так, якщо у батька значенняpositionвстановлено якstaticабо батька немає, то відлік координат ведеться від краю вікна браузера.Якщо у батька значення position задано як
relative, то відлік координат ведеться від краю батьківського елементу.fixedЗа своєю дією це значення близьке до
absolute, але на відміну від нього позиціонує елемент відносно вікна браузера, а не документа та не змінює свого положення при прокручуванні веб-сторінки.relativeВідносне позиціювання. Положення елемента встановлюється відносно його поточного положення. Додавання властивостей
left,top,rightіbottomзмінює позицію елемента і зрушує його в ту чи іншу сторону. Ця властивість дозволяє змінюва ти позицію елемента без зміни макету.stickyЦе поєднання відносного і фіксованого позиціонування. Елемент розглядається як відносно позиційований і прокручується разом з вмістом сторінки до тих пір, поки він не перетинає певний поріг, після чого він стає фіксованим. Зазвичай застосовується для фіксації заголовка на одному місці, доки вміст, до якого належить заголовок, прокручується на сторінці.
initialВстановлює властивість у значення без задання.
inheritВказує на спадковість властивостей від свого батьківського елемента.
| Значення без задання: | static |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.position="absolute" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| static, relative, absolute | 1.0 |
4.0 |
1.0 |
1.0 |
4.0 |
12.0 |
| fixed | 4.0 |
7.0 |
1.0 |
1.0 |
4.0 |
12.0 |
| sticky | 56.0 |
Не підтримується |
32.0 |
6.1 |
42.0 |
16.0 |
| Переглядач | |||
|---|---|---|---|
| static, relative, absolute | 1.0 |
1.0 |
1.0 |
| fixed | 1.0 |
1.0 |
1.0 |
| sticky | Не підтримується |
32.0 |
6.1 |
Мобільних переглядачів ще не додано.
Приклади
Значення, які можна задавати для властивості position.
Приклад використання властивості position
Демонстрація роботи властивості.
Динамічний приклад.