Сообщение об ошибке

Deprecated function: The each() function is deprecated. This message will be suppressed on further calls в функции menu_set_active_trail() (строка 2405 в файле /home/kpaco123/e-helper/includes/menu.inc).

Лекція 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. Вона задається будь яким цілим числом. Чим більше число, тим ближче до переднього плану буде знаходитися слой.