Лекція 7. Обтікання та позиціонування
Обтікання
В потоці документа блокові елементи розміщуються вертикально один за одним і займають весь доступний простір по горизонталі.
Потік документа – послідовний порядок розміщення елементів на сторінці.
За обтікання елементів в потоці відповідає властивість float, яка може набувати значень left, right, none, inherite.
Обтікання позиціонує елементи зліва чи справа сторінки (контейнера), фактично «приклеює » його до лівої чи правої сторони контейнера. Обтікання забирає елемент з загального потоку документу. На місце, що звільнилось, справа чи зліва від елемента переміщується елемент, що йде наступним у HTML- коді. Плаваючі елементи залишаються у контекстній області батьківського елемента (контейнера).
У елементів, що обтікаються, поля не накладаються.
Для вкладених елементів іноді буває корисно встановлювати none, для того, щоб вони були на одному рівні з першою стрічкою тексту, що обтікає його. Всі елементи, що обтікаються, поводять себе як блочні, тому є сенс встановлювати їх ширину. Обтікання можна відключити за допомогою властивості clear, яка може набувати значень left, right, none, inherite, both. Left – відключає обтікання зліва, right – відключає обтікання з правої сторони, both – відключає обтікання з обох сторін, none – задає значення по замовчуванню.
Розглянемо детальніше принципи обтікання. Припустимо, є наступний HTML-код:
<p>текст1</p>
<p class=”P2”>текст2</p>
<p class=”P3”>текст3</p>
<p class=”P4”>текст4</p>
<p class=”P5”>текст5</p>
<p> текст6</p>
<p>текст7</p>
і наступну CSS – властивість:
.P2.P3.P4.P5{
Float:left;
Width:300px;
}
У результаті блочні елементи(абзаци у даному випадку) у контейнері будуть розміщені так:
 |
Текст 7
Блочні елементи розміщуються в контейнері один за одним зліва направо. Якщо елемент не вміщається у стрічці, він переходить в наступну крайню ліву доступну позицію. Місце, що звільнилось від перенесеного елемента, займають інші елементи, що його обтікають і йдуть за ним у коді.
Якщо для контейнера задати таку властивість, як over float:auto, то він не «схлопнеться» за умови, якщо в нього будуть елементи, що обтікаються.
Позиціонування
За позиціонування відповідає властивість position, яка може набувати значення static, fixed, absolute, relative, inherite. За замовчуванням у елементів встановлено значення static. Таким чином елемент залишається у нормальному потоці документа. Значення relative вмикає відносне позиціонування елемента – зсовує елемент відносно його початкової позиції у потоці. Простір, який займав елемент у потоці, залишається вільним. Значення absolute – елемент повністю видаляється з потоку. Місце під елемент зникне і решта елементів змістяться вліво. Значення fixed – фіксована позиція елемента відносно вікна, а сам елемент повністю випадає з потоку.
Порядок слоїв
Абсолютно позиціоновані елементи перекривають інші (відображаються поверх них). Тому є вірогідність того, що декілька елементів будуть накладені один на одного.
По замовчуванню слої елементів розміщуються в тому порядку, що вони ідуть в коді. Для зміни порядку використовується властивість z-index. Вона задається будь яким цілим числом. Чим більше число, тим ближче до переднього плану буде знаходитися слой.