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 підтримує значення
автор: NagarD-webkit-sticky.
Синтаксис
position: static|absolute|fixed|relative|sticky|initial|inherit;Властивість position може отримувати 7 значень:
-
static -
Елементи відображаються як зазвичай (в потоці формування документа). Використання властивостей
автор: NagarDleft,top,right,bottomтаz-indexне призводить до будь-яких результатів. Без задання. -
absolute -
Видаляє елемент з загального потоку (місце, що звільнив елемент заповнюється іншими елементами) і вставляється відносно свого батьківського, не статично позиційованого елемента, якщо такого елемента немає, то їм вважається вікно браузера (При цьому ширина елемента, без задання, встановлюється за його вмістом). Нове місце розраховується за допомогою властивостей
left,top,rightтаbottomНа положення впливає значення властивості
positionбатьківського елемента. Так, якщо у батька значенняpositionвстановлено якstaticабо батька немає, то відлік координат ведеться від краю вікна браузера.Якщо у батька значення position задано як
автор: NagarDrelative, то відлік координат ведеться від краю батьківського елементу. -
fixed -
За своєю дією це значення близьке до
автор: NagarDabsolute, але на відміну від нього позиціонує елемент відносно вікна браузера, а не документа та не змінює свого положення при прокручуванні веб-сторінки. -
relative -
Відносне позиціювання. Положення елемента встановлюється відносно його поточного положення. Додавання властивостей
автор: NagarDleft,top,rightіbottomзмінює позицію елемента і зрушує його в ту чи іншу сторону. Ця властивість дозволяє змінюва ти позицію елемента без зміни макету. -
sticky -
Це поєднання відносного і фіксованого позиціонування. Елемент розглядається як відносно позиційований і прокручується разом з вмістом сторінки до тих пір, поки він не перетинає певний поріг, після чого він стає фіксованим. Зазвичай застосовується для фіксації заголовка на одному місці, доки вміст, до якого належить заголовок, прокручується на сторінці.
автор: NagarD -
initial -
Встановлює властивість у значення без задання.
автор: NagarD -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента.
автор: NagarD
| Значення без задання: | static |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.position="absolute" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 4 | |
| static, relative, absolute | 1.0 | 1.0 | 1.0 | 4.0 | 12.0 | 4.0 |
| fixed | 4.0 | 1.0 | 1.0 | 4.0 | 12.0 | 7.0 |
| sticky | 56.0 | 32.0 | 6.1 <br> -webkit-sticky | 42.0 | 16.0 | Не підтримується |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 | |
| static, relative, absolute | 1.0 | 1.0 | 1.0 | |
| fixed | 1.0 | 1.0 | 1.0 | |
| sticky | Не підтримується | 32.0 | 6.1 <br> -webkit-sticky |
Приклади
+ запропонувати свій приклад у пісочниці
Значення, які можна задавати для властивості position.
Приклад використання властивості position
Демонстрація роботи властивості.
Динамічний приклад.
Коментарі
Коментарів ще немає — будьте першим!