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


Властивість position визначає тип позиціювання відносно вікна браузера або інших елементів: static, relative, absolute, fixed або sticky (статичний, відносний, абсолютний, фіксований або клейкий).

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

Властивість position використовується разом з top, right, bottom і left для позиціювання елементу в потрібному місці.

Розміри абсолютно позиціонованого елементу(absolute), який має встановлене значення auto для властивостей width і height, відповідають його вмісту. Тим часом, блок може займати всю можливу висоту батьківського елементу, якщо має встановлене значення 0 для top i bottom, а також невизначену висоту (auto). Таким чином також може бути розтягнутий по горизонталі: із визначеними left i right та невизначеною шириною.

Але в усіх інших випадках:

  • якщо одночасно встановлене значення для top i bottom (й визначена висота), застосовується top (bottom ігнорується);
  • якщо одночасно встановлене значення для left i right (й визначена ширина), застосовується left якщо для directio встановлене значення ltr (значення без задання), і right якщо rtr.
Нотатка:

Браузер Safari підтримує значення -webkit-sticky.

Синтаксис

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
-webkit-sticky

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
-webkit-sticky


Мобільних переглядачів ще не додано.

Приклади


Значення, які можна задавати для властивості position.

Приклад використання властивості position

Демонстрація роботи властивості.

Динамічний приклад.

Додаткові посилання