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.

автор: NagarD

Нотатка: Браузер Safari підтримує значення -webkit-sticky.
автор: NagarD

Синтаксис

position: static|absolute|fixed|relative|sticky|initial|inherit;

Властивість position може отримувати 7 значень:

static

Елементи відображаються як зазвичай (в потоці формування документа). Використання властивостей left, top, right, bottom та z-index не призводить до будь-яких результатів. Без задання.

автор: NagarD

absolute

Видаляє елемент з загального потоку (місце, що звільнив елемент заповнюється іншими елементами) і вставляється відносно свого батьківського, не статично позиційованого елемента, якщо такого елемента немає, то їм вважається вікно браузера (При цьому ширина елемента, без задання, встановлюється за його вмістом). Нове місце розраховується за допомогою властивостей left, top, right та bottom

На положення впливає значення властивості position батьківського елемента. Так, якщо у батька значення position встановлено як static або батька немає, то відлік координат ведеться від краю вікна браузера.

Якщо у батька значення position задано як relative, то відлік координат ведеться від краю батьківського елементу.

автор: NagarD

fixed

За своєю дією це значення близьке до absolute, але на відміну від нього позиціонує елемент відносно вікна браузера, а не документа та не змінює свого положення при прокручуванні веб-сторінки.

автор: NagarD

relative

Відносне позиціювання. Положення елемента встановлюється відносно його поточного положення. Додавання властивостей left, top, right і bottom змінює позицію елемента і зрушує його в ту чи іншу сторону. Ця властивість дозволяє змінюва ти позицію елемента без зміни макету.

автор: NagarD

sticky

Це поєднання відносного і фіксованого позиціонування. Елемент розглядається як відносно позиційований і прокручується разом з вмістом сторінки до тих пір, поки він не перетинає певний поріг, після чого він стає фіксованим. Зазвичай застосовується для фіксації заголовка на одному місці, доки вміст, до якого належить заголовок, прокручується на сторінці.

автор: NagarD

initial

Встановлює властивість у значення без задання.

автор: NagarD

inherit

Вказує на спадковість властивостей від свого батьківського елемента.

автор: NagarD

Значення без задання:	static
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.position="absolute"