Властивість display і його position

Блоковий елемент у верстці позначається тегом div.

Чим div відрізняється від p?

Ось такий код рекомендується використовувати для абзацу у всьому проекті. Більше нічого не потрібно, ну хіба що збільшувати шрифт і міняти колір тексту для деяких блоків:

Не потрібно прописувати блоковим елементам в CSS властивість display: block - це привід подякувати кепа.

Position для DIV

Ну а тепер найцікавіше - позиціонування. Коли блок розміщений на сторінці у нього є стандартні параметри: ширина 100% батьків, позиціонування static. В такому позиціонуванні блок в сторінці, як в склянці: зрушуєш його - зсувається все що під ним (або над ним якщо зрушуєш від низу).

Є можливість додати блоку властивість float: left (right). У цьому випадку блок в розмірі зменшується до розмірів свого вмісту, а все що йде нижче - обтікає його справа або зліва.

Блок батько, всередині якого є div c float: left або right, втрачає свою висоту. В цьому випадку необхідно додати йому в CSS псевдоелемент.

Якщо не прописати псевдоелемент, то відступ вниз не спрацює.

position relative

Якщо елементу присвоєно в css властивість position: relative, то веде він себе таким чином:

елемент за замовчуванням займає своє місце в «стакані» сторінки, його ширина і висота.
Елемент можна зрушити властивостями left, right, top, bottom - він буде зміщений так, як ніби його немає на сторінці. З заїздом на сусідні елементи.
Властивостями margin елемент буде зрушуватися без «накладення» на сусідні елементи

position absolute

Дуже важливо зрозуміти роботу цього значення. Воно є основним для блокової верстки html-сторінок. Якщо елементу присвоєно дане властивість в css, він відображається браузером так, як ніби відсутня в загальній черзі. Управління позицією елемента виконується за допомогою left, right, top, bottom. Відлік ведеться від кордонів блоку-батька. Блоком-батьком буде перший блок, в якому розташований наш з position: absolute і у якого властивість position встановлено в значення relative, absolute або fixed. Якщо таких блоків в дереві html розмітки не знайшлося, відлік піде від лівого верхнього кута сторінки.

Не дивуйтеся тому, що доданий в футере блок з кодом:

виявиться десь в header, хоча повинен бути в footer, в 10 пікселях від верхнього лівого кута. Ситуацію виправить одна строчка:

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

Задавайте назва класу блоку так, щоб було зрозуміло що знаходиться в блоці. Якщо новини, то .news, контент - .content і.т.д.

position fixed

Коли у блоку position fixed, на нього перестає діяти скролл вікна. Позиціонування задає його розташування від краю вікна і прокрутка сторінки не впливає на його стан. Елемент можна зрушити властивостями left, right, top, bottom. Дуже корисна властивість, за допомогою якого можна робити popup-и, різні закладки, вікна, панелі.