Поняття потоку

Влад Мержевич

У HTML розміщення елементів на сторінці відбувається зверху вниз згідно схеми документа. Шар, розміщений у самому верху коду, відобразиться раніше шару, що розташований у коді нижче. Така логіка дозволяє легко прогнозувати результат виводу елементів і керувати ним. Порядок виведення об'єктів на сторінці називається «потоком». При цьому існує кілька можливостей "вирвати" елемент з потоку і надати йому майже міфічні властивості. Оскільки він не існує у потоці, його можна описати у коді де завгодно, а також виводити у вказане місце вікна.

Використання позиціонування

Властивість position встановлює позиціонування елемента відносно початкового положення або батька. Розглянемо спочатку значення fixed, яке виводить елемент з потоку і прив'язує до певної точки вікна. Особливістю fixed є фіксація шару на одному місці, при цьому ця позиція не змінюється при зміні розмірів вікна або прокрутці сторінки. Така особливість дозволяє створювати непересувні елементи інтерфейсу, як кнопка "Залишити відгук", як показано у прикладі 1. Додавання fixed недостатньо, також необхідно встановити позицію елемента за допомогою одного або двох властивостей left, top, right, bottom, які керують положенням відносно вікна браузера.

Приклад 1. Фіксований шар

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Фіксований шар</title>
  <style type="text/css">
  body {
  margin-left: 90px;
  }
  .feedback {
  position: fixed;
  left: 0; top: 50%;
  background: #fc0;
  width: 70px;
  padding: 5px;
  }
  </style>
  </head>
  <body>
  <p>Я знову побачив Теночтітлан, великолепні кімнати у палаці Монтесуми і
  себе самого, сплячого на золотому ложі. Я знаю, що я бог Тескатліпока і
  завтра мене принесуть в жертву. Я спав, виснажений і пригнічений, і бачив
  сон. Я бачив у сні, наче стою на тому самому місці, де стою зараз, і
  запах наших квітів дратує мені ніздрі, як і цієї ночі, і солодкі
  солов'їні пісні звучать точно так само, як звучали вони у моїх вухах. Мені
  снилося, що, поки я стояв і слухав солов'їв, над зеленими кронами дубів і
  ясенів взійшла місяць, — ось, ось він вже сяє на небесах. Мені снилося, що
  чиясь голос заспівав за пагорбом, але тут я прокинувся від давно забутих
  візій минулого.</p>
  <div class="feedback">Залишити<br />відгук</div>
  </body>
</html>

Результат даного прикладу показано на малюнку 1. Щоб текст не накладався на шар, додано відступ зліва. У зв'язку з тим, що шар feedback не існує у потоці документа, він може розташовуватися в будь-якому місці коду, у даному випадку внизу.

Мал. 1. Фіксований шар

Значення absolute властивості position також виводить елемент з потоку, але на відміну від fixed шар прокручується разом з вмістом. Крім того, суттєвий вплив на позицію мають властивості батька. Можливі два основних варіанти.

  1. Батька немає (його роль виконує <body>) або у батька елементу не задано властивість position.
  2. У батька елемента встановлено властивість position у значенні absolute або relative.

У першому випадку все просто, елемент себе веде як у прикладі 1, за винятком того, що не закріплюється строго на одному місці, а може прокручуватися одночасно зі сторінкою. У другому варіанті позиція елемента задається відносно батька.

У прикладі 2 створюються два вкладені шари з абсолютним позиціонуванням. Координати першого шару layer1 задаються відносно вікна браузера, координати другого шару layer2 відносно меж шару layer1.

Приклад 2. Абсолютне позиціонування

XHTML 1.0CSS 2.1CSS3IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Позиціонування</title>
  <style type="text/css">
   .layer1 {
    width: 217px;
    height: 512px;
    background: url(images/bg2.png) no-repeat;
    position: absolute;
    right: 20%;
    bottom: 0;
   }
   .layer2 {
    background: rgba(0,0,0, 0.5);
    color: #fff;
    position: absolute;
    bottom: 30px;
    width: 207px;
    padding: 5px;
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   <div class="layer2">
     Хребет людини
   </div>
  </div>
 </body>
</html>

Результат даного прикладу показано на малюнку 2.

Мал. 2. Положення шару на сторінці

Зверніть увагу, що абсолютно позиціонований елемент може виходити за верхній і лівий край вікна браузера, при цьому не виникає смуг прокрутки. Також при використанні властивості position ширина шару автоматично прирівнюється до ширини вмісту плюс, як завжди, ширина відступів, меж і полів.

Використання float

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

  • галереї малих фотографій;
  • двох і трьохколоночні макети;
  • горизонтальні меню;
  • ілюстрації в тексті;
  • багатоколоночний текст.

float може додаватися до зображень (тег <img>) і блочних елементів типу <p>, <div>. У прикладі 3 показано використання float для абзацу з фотографією.

Приклад 3. Плаваючий елемент

XHTML 1.0CSS 2.1IECrOpSa 5Fx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Обтікання</title>
  <style type="text/css">
   .right {
    float: right;
   }
  </style>
 </head>
 <body>
  <p class="right"><img src="images/cat.jpg" alt="Кішка" /></p>
  <p>Сфотографовано на камеру Canon EOS 50D. Об'єктив 24-105, 
  діафрагма 4.0, витримка 1/500, чутливість ISO 400</p>
 </body>
</html>

Результат прикладу показано на малюнку 3.

Мал. 3. Плаваючий елемент

Властивість float лише частково впливає на елемент у потоці. Можна керу

Часті запитання