Page 54 - 6108

В результаті зміни значення властивості display міняється тільки спосіб
представлення елемента браузером, при цьому сам елемент не змінює свій тип,
тобто гіпертекстове посилання в розмітці веб-сторінки так і залишиться
рядковим елементом, в який не можна вкладати блокові елементи.
Існує ще одна група елементів, які браузер обробляє як рядково-блокові
{display: inline-block;}. Такі елементи є рядковими, але для них можна
задавати поля, відступи, ширину і висоту: <button>, <input>, <select>,
<textarea>.

2.2.4 CSS позиціювання
CSS позиціювання управляє розташуванням елементів на сторінці.
Змінювати положення елементів на сторінці можна за допомогою css-

властивостей position і float.
Позиціонування елементів на сторінці за допомогою властивості
position.

Властивість position визначає порядок, відповідно до якого вибраний
елемент відображається на веб-сторінці. За замовченням всі елементи
розташовуються послідовно один за іншим в тому порядку, в якому вони
визначені в html-документі ({position: static}). Властивість не
успадковується.
Блочний елемент (p, div, h1 та ін.) займає 100% ширини батьківського
елементу (за замовчуванням – body). Тому, блокові елементи відображаються
один під іншим відповідно до розмітки сторінки.
Рядковий елемент (em, strong, span та ін.) Займає ширину, яка
відповідає ширині вмісту всередині нього. Тому, рядкові елементи
відображаються поруч один з одним.
Властивість position разом зі значеннями top, right, bottom і left
відображає елемент з порушенням звичайного порядку, зміщуючи його на
задану відстань. При позиціонуванні елементів можна використовувати як
додатні, так і від’ємні значення.
position : static || relative || absolute || fixed
– static – значення за замовченням. Елементи відображаються
послідовно один за іншим в тому порядку, в якому вони визначені в html-
документі.
– relative – дозволяє зміщувати елемент щодо його поточного
становища в структурі html-документа вгору, вправо, вниз або вліво (залежить
від того, яке задано значення: top / right / bottom / left). Інші елементи
розміщені на сторінці щодо його первісного положення, без зміщення.

– absolute – можна задавати тільки для блочних (display: block) і
строчно-блочних (display: inline-block) елементів. Можна вкладати один
блок з position: absolute в інший блок з position: absolute.
Позиція елемента зміщується щодо батьківського елементу вгору, вправо,
вниз або вліво (залежить від того, яке задано значення: top / right /
bottom / left), при цьому порушується порядок відображення елементів.
Елементи, наступні за ним, можуть потрапити під нього.