Елемент Flow

Русский перевод: Элемент Flow

Flow ( в перекладі з англ. – потік ) описує, як елементи розташовуються відносно один одного. За замовчуванням родинні елементи перебувають в одному потоці і їх розташування на сторінці статично; порядок появи елементів на сторінці такий же, як і в коді. За допомогою CSS можна переміщати елементи в окремі потоки. Це дає більше можливостей для дизайну сторінки та контролю схеми розміщення елементів над кодом.

Position

Ми використовуємо властивість position для того, щоб визначити позицію (розташування) елемента. Стандартне значення: статичне розміщення (static). Але є й інші варіанти:

  • absolute (абсолютне)
  • relative (відносне)
  • fixed (зафіксоване)

Абсолютне позиціонування

Елементи, які спозиційовані абсолютно, видаляються із звичайного потоку. У результаті, позиціонування наступних споріднених елементів не зачіпається. Щоб спозиціонувати елементи абсолютно, потрібно властивості position встановити значення absolute, а також визначити офсетні властивості (властивості зсуву).

Офсетні властивості: top, right, bottom та left

Офсетними властивостями (властивостями зсуву) можуть бути: top (наверх), right (праворуч), bottom (вниз) і left (ліворуч). Ми можемо вказати їх значення в цифрах вимірювання (наприклад, 10px) або відсотках від блоку,що містить (наприклад 20%). Ці властивості зміщують елемент від найбільш близького блокового елемента, який позиційований нестатично (тобто абсолютно, відносно або зафіксовано). У разі, якщо немає попереднього елемента, позиційованого нестатично, зсув відбувається відносно браузерного вікна.

Приклад коду

<!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" />
<style type="text/css">
h1 {
 position:absolute;
 top:70px;
 left:50px;
 border:2px solid #006;
 padding:1px;
 background-color:#600;
 color:#eee;
}
#explanation {
 color:#006;
 font-weight:bold;
 font-size:1.2em;
}
#wrapper {
 width:600px;
 background-color:#def;
 border:1px solid #006;
}
</style>
<title>CSS Absolute Positioning</title>
</head>
<body>
<div id="wrapper">
 <h1>Абсолютне позиціонування CSSg</h1>
 <h2>From the Left and the Top</h2>
 <div id="explanation">
  <p>Notice how this text is in the upper corner.</p>
  <p>That's because the preceding h1 element has been absolutely positioned.</p>
  <p>Positioning an element absolutely takes the element out of the regular flow of the document.</p>
 </div>
</div>
</body>
</html>

Зверніть увагу, що позиціювання споріднених елементів h2 та div не було порушено попереднім елементом h1. Це результат того, що елемент був позиційований абсолютно

Подивіться, що станеться, якщо ми опустимо вниз містимий div “wrapper” значенням властивості margin-top:


#wrapper {
 margin-top:100px;
 width:600px;
 background-color:#def;
 border:1px solid #006;
}

Зверніть увагу, що елемент h1 не було порушене цим. Це тому, що div “wrapper” не був у тому ж потоці, що й елемент h1. Щоб помістити його в той же потік, його потрібно спозиціонувати абсолютно. Досягти цього можна наступним кодом (тоді div переміститься із-за застосування властивості top, а не margin-top):

#wrapper {
 position:absolute;
 top:100px;
 width:600px;
 background-color:#def;
 border:1px solid #006;
}

Далі ми повинні спозиціонувати елемент h1 щодо нижнього правого кута, використовуючи цей код:


h1 {
 position:absolute;
 bottom:0px;
 right:0px;
 border:2px solid #00f;
 background-color:#600;
 color:#eee;
}

Використання зазначеного вище коду дасть нам наступні результати:

Ви побачите, що Firefox не розмістить елемент в самому низу екрана. Дистанція від нижньої частини може відрізнятися між браузерами, але у всіх них буде якийсь простір.

Як видно на скріншоті h1 елемент на тій же дистанції від правого нижнього кута після зміни вікна браузера.

Як і раніше, у разі коли div “wrapper” позиційований абсолютно, елемент h1 буде позиційований всередині елемента div. Ось чому цей код буде обробляти сторінку під ним:


#wrapper {
 position:absolute;
 top:10px;
 width:600px;
 background-color:#def;
 border:1px solid #006;
}

Погляньте на div “wrapper”. Повністю містить елемент h1.