Page 55 - 6108

На положення також впливає значення властивості position
батьківського елементу. Так, якщо у батька значення position встановлено як
static або батька немає, то відлік положення ведеться від верхнього краю
вікна браузера.
Якщо у батька значення position задано як relative / fixed /
absolute, то відлік положення елемента ведеться від краю батьківського
елементу.
– fixed – дозволяє зафіксувати елемент у потрібному місці сторінки.
При прокручуванні сторінки положення елемента на сторінці не змінюється.
Елемент можна змістити вгору, вправо, вниз або вліво залежно від заданого

значення: top / right / bottom / left:
– bottom – встановлює зсув між нижнім зовнішнім краєм поля
позиціонованого елемента і нижнім краєм блоку-контейнера. Застосовується до
елементів, для яких властивість position не дорівнює static.
– left – встановлює зсув між лівим зовнішнім краєм поля
позиціонованого елемента і лівим краєм блоку-контейнера. Застосовується до
елементів, для яких властивість position не дорівнює static.
– right – встановлює зсув між зовнішнім краєм правого поля
позиціонованого елемента і правим краєм його блоку-контейнера.
Застосовується до елементів, для яких властивість position не дорівнює

static.
– top – встановлює зсув між зовнішнім краєм верхнього поля
позиціонованого елемента і верхнім краєм його блоку-контейнера.
Застосовується до елементів, для яких властивість position не дорівнює
static.
Значення властивостей bottom / left / right / top:
– auto – значення за замовчуванням. Обчислюване значення
властивості рівне нулю.
– значення – зсув задається в одиницях довжини.
– % – процентні значення обчислюються щодо висоти блоку-
контейнера.
– inherit – успадковує значення від батьківського елемента.

Обтікання елементів на сторінці за допомогою властивості float
У звичайному порядку блокові елементи відображаються, починаючи з
верхнього краю вікна браузера у напрямку до нижнього краю.
Властивість float дозволяє переміщати будь-який елемент в потрібне
місце, вирівнюючи його по лівому або правому краю веб-сторінки або містить
його елементи-контейнери. При цьому інші блокові елементи будуть його
ігнорувати, а рядкові елементи будуть зміщуватися вправо або вліво,
звільняючи для нього простір і обтікаючи його.
Плаваючий блок приймає розміри свого вмісту з врахуванням внутрішніх
відступів і рамок блоку. Верхні і нижні відступи margin плаваючих елементів не
зливаються.
Властивість float застосовується як до блокових елементів, так і до
рядкових елементів. В якості значень вказується одне з трьох: