| Предыдущая версия справа и слева
Предыдущая версия
Следующая версия
|
Предыдущая версия
|
position [2023/09/27 20:26]
tro |
position [2023/09/28 16:59] (текущий)
tro |
| ====== position ====== | ====== position ====== |
| position: static | relative | absolute | fixed | sticky | position: static | relative | absolute | fixed | sticky |
| * static - За замовчуванням встановлено значення static. Статичне позиціонування (static) – це вихідний стан всіх елементів веб-сторінки. Блокова модель і флексбокс мають елементи саме в цьому статичному потоці сторінки. | * **static** - За замовчуванням встановлено значення static. Статичне позиціонування (static) – це вихідний стан всіх елементів веб-сторінки. Блокова модель і флексбокс мають елементи саме в цьому статичному потоці сторінки. |
| * relative - Властивості top, left, bottom і right дозволяють вказувати візуальне зміщення елемента відносно його вихідного положення. Можуть мати негативне значення. | * **relative** - Властивості __top__, __left__, __bottom__ і __right__ дозволяють вказувати візуальне зміщення елемента відносно його вихідного положення за замовченням. Можуть мати негативне значення. Не виймаєтя з потоку. Без доп.параметрів веде себе як звичайний статичний елемент. |
| * absolute - За допомогою властивостей top, left, bottom і right можна налаштувати положення елемента, але треба обов’язково враховувати, звідки ведеться відлік значень цих властивостей. браузер шукає найближчий елемент-предок, у якого властивість position має будь-яке значення крім static. Якщо такого предка не виявиться, то відлік буде починатися від рамки елемента <body>. | * **absolute** - За допомогою властивостей __top__, __left__, __bottom__ і __right__ можна налаштувати положення елемента, але треба обов’язково враховувати, звідки ведеться відлік значень цих властивостей. браузер шукає найближчий елемент-предок, у якого властивість position має будь-яке значення крім static. Якщо такого предка не виявиться, то відлік буде починатися від рамки елемента <body> але в рамках view-port. |
| * fixed - Такий елемент вилучається із потоку сторінки та позиціонується відносно в'юпорту. Це створює ефект фіксації елемента у певному місці екрана під час прокручування сторінки. | * **fixed** - Такий елемент вилучається із потоку сторінки та позиціонується відносно в'юпорту. Це створює ефект фіксації елемента у певному місці екрана під час прокручування сторінки. |
| * sticky - Липке позиціонування - Поки елемент знаходиться у своєму контейнері, і контейнер не виходить з області видимості при вертикальному прокручуванні — елемент поводиться як позиціонований відносно (relative). | * **sticky** - Липке позиціонування - Поки елемент знаходиться у своєму контейнері, і контейнер не виходить з області видимості при вертикальному прокручуванні — елемент поводиться як позиціонований відносно (relative). Як тільки частина батьківського контейнера виходить із області видимості, елемент фіксується на сторінці до тих пір, поки хоча б якась частина контейнера присутня на екрані. Якщо весь контейнер вийде з області видимості, то знову увімкнеться поведінка як при відносному позиціонуванні — елемент зникне з екрану за контейнером. |
| Як тільки частина батьківського контейнера виходить із області видимості, елемент фіксується на сторінці до тих пір, поки хоча б якась частина контейнера присутня на екрані. | |
| Якщо весь контейнер вийде з області видимості, то знову увімкнеться поведінка як при відносному позиціонуванні — елемент зникне з екрану за контейнером. | |
| |