Поняття потоку на сторінці

HTML документ являє собою живий документ. Навіть без будь-якого застосування CSS, HTML-документ вже містить свої власні правила:

• мінливість: як вміст адаптується до розмірів браузера; 
• черговість: порядок, в якому з'являються елементи; 
• накладення: як елементи з'являються один над одним. 

Це природна поведінка є логічною.

В HTML вміст - це король. Всі блокові елементи є гнучкими. Вони природним чином адаптують свою компоновку, щоб пристосувати внутрішній вміст:

• width: 100% : Блок буде займати всю доступну ширину. 
• Перенесення слів.  Якщо вбудований вміст в блоці не поміщається на одному рядку, воно буде продовжено на новому рядку. 
• height: auto. Висота блоку змінюється автоматично, щоб вона відповідала розміру його вмісту.

Елементи HTML відображаються в тому порядку, в якому вони записані в коді. Перший в коді - перший в браузері.

Кожен блок з'являється в тому порядку, в якому він з'являється в коді HTML, зверху вниз.

У браузера є три виміри.

Кожен елемент HTML належить уявному шару.

Порядок накладення залежить від того, як елементи вкладені одна в одий: дочірні елементи з'являються поверх своїх батьків.

Кожен вкладений елемент з'являється поверх свого батька.
Чим глибше він по ієрархії, тим вище в накладенні.

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

Деякі властивості CSS дозволяють порушити потік:

• height і width можуть поміняти властивість елементу;
• float порушує поведінку елемента, а також його оточення;
• значення absolute і fixed у властивості position видаляють елемент з потоку;
• z-index може змінювати порядок накладення елементів