Елемент Flow

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

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

Position

Ми використовуємо властивість position, щоб визначити розташування елемента. Стандартне значення — static. Інші варіанти:

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

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

Елементи, які спозиційовані абсолютно, видаляються із звичайного потоку. Наступні елементи не зачіпаються. Щоб це зробити — встановіть position: absolute і за потреби додайте властивості top, right, bottom, left.

Приклад коду

01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02
<html xmlns="http://www.w3.org/1999/xhtml">
03
<head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <style type="text/css">
06 h1 { position:absolute; top:70px; left:50px; border:2px solid #006;
07 padding:1px; background-color:#600; color:#eee; }
08 #explanation { color:#006; font-weight:bold; font-size:1.2em; }
09 #wrapper { width:600px; background-color:#def; border:1px solid #006; }
10 </style>
11 <title>CSS Absolute Positioning</title>
12 </head>
13 <body>
14 <div id="wrapper">
15   <h1>Абсолютне позиціонування CSS</h1>
16   <h2>From the Left and the Top</h2>
17   <div id="explanation">
18     <p>Notice how this text is in the upper corner.</p>
19   </div>
20 </div>
21 </body>
22 </html>

Зверніть увагу, що інші елементи (h2, div) не порушені попереднім h1.

Варіації з margin та position

Якщо зсунути #wrapper через margin-top — h1 залишиться на місці. Але якщо задати position: absolute для #wrapper — тоді h1 позиціонується всередині нього.

Код для правого нижнього кута

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

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

← Успадковані значення та @import | Угрупування і вкладеність →