), списки (

) та інші елементи.

А тепер про

ах.

Як уже говорилося вище, задати місце можна будь-якому HTML елементу. Для цього немає потреби завжди використовувати тег

. Також використання цього тега не зобов'язує вас задавати йому будь-яке положення на веб-сторінці.
Сенс застосування блоку, заданого тегом
зводиться до укрупнення. Адже всередину його можна помістити інші елементи (параграфи, картинки тощо). Таким чином виходить великий блок з різноманітним вмістом, який значно легше позиціонувати на веб-сторінці, ніж кожен з елементів окремо.
Позиціювання елементів.
Існує чотири основні типи позиціонування:
1. Статичне (Static)
2. Абсолютне (Absolute)
3. Фіксоване (Fixed)
4. Відносне (Relative)
Статичне (Static)
Використовується як розташування за замовчуванням. В цьому випадку браузер переглядає html код, поділяє його на елементи і складає сторінку. Виходить послідовність із низки елементів. Виводяться вони в тому порядку, в якому вказані в коді html.
Застосування параметрів left, top, right та bottomне призводить до якихось результатів.
Потрібно пам'ятати про статичне позиціонування, коли використовується відносне розташування.
Абсолютне (Absolute)
За допомогою абсолютного позиціонування задаються координати верхнього лівого кута блоку. У цьому відлік координат відбувається щодо розташування батьківського елемента. Якщо батьківським елементом є вікно браузера, вирівнювання блоку відбувається щодо нього. Якщо існує інший елемент, всередині якого розташований блок, вирівнювання відбувається вже щодо цього елемента.
Фіксований (Fixed)
Вже з назви стає зрозумілим, що в даному випадку елемент фіксується. Він розташований у певному місці веб-сторінки і нікуди не зрушується. Таке вирівнювання часто застосовується до спливаючих вікон, коли вони фіксуються по центру і не зміщуються при прокручуванні сторінки.
Відносне (Relative)
З цим видом позиціонування може бути складності. Його назва не зовсім вдала. Багато хто плутає відносне та абсолютне позиціонування елементів. Може здатися, що вирівнювання відбувається щодо батьківського елемента. А у випадку з абсолютним позиціонуванням – щодо вікна браузера. Але це не так.
Потрібно усвідомити, що розташування елемента в цьому випадку відбувається щодо його місця в статичному положенні. Це те, що згадувалося вище.
Простіше кажучи, ви вказуєте браузеру, що необхідно пересунути елемент на стільки пікселів, щодо того місця, де він розташований за замовчуванням.
Існує ще один складний момент. Що станеться, якщо батьківський елемент має відносне позиціонування, а вкладений у нього абсолютний елемент? У цьому випадку відлік координат дочірнього елемента буде проводитись щодо батьківського елемента, з урахуванням його зміщення, якщо воно має місце.
Підведемо підсумок.
Отже, є властивість position. Ця властивість може приймати 4 значення Static, Absolute, Fixed та Relative. За замовчуванням йде Static.
Коли ви вказуєте координати елемента, необхідно також повідомити браузеру, яким чином він повинен ці координати відраховувати. Потрібно дати йому відправну точку.
Не забувайте, що за відсутності властивості positionкоординати не враховуватимуться, блок залишиться на колишньому місці, у своєму статичному положенні.


А тепер подивимося, як задаються координати.
Для цих цілей застосовуються чотири види властивостей:
1. Top
2. Left
3. Right
4. Bottom
Top- Позитивне значення (наприклад, 20px) зміщує блок на 20 пікселів вниз. Негативне значення (-20px) зміщує елемент на 20 пікселів верх. Усе це відбувається щодо верхнього лівого кута.
Left- Зміщення вліво або вправо, залежно від знака. Щодо лівого верхнього кута.
Right- Зміщення вправо і вліво, дивлячись якийсь знак. Щодо правого верхнього кута.
Bottom- Зміщення вгору чи вниз, залежить від знака. Відбувається щодо лівого нижнього кута.
Ось код HTML:







А це CSS:
#1 {
position:relative;
top:100px;
left:100px;
width:500px;
height:500px;
background-color: #CCCCCC;
}
#11 {
background-color: #003399;
position:absolute;
bottom: -30px;
right: -50px;
width:100px;
height:100px;
}
#2 {
background-color: #990066;
width:200px;
height:300px
}
Потренуйтеся.
Поки писав і сам розібрався.
Для верстки сторінок часто використовуються два основних інструменти. позиціонування (positioning)і вільне переміщення (floating). CSS-позиціонування дозволяє вказати, де з'явиться блок елемента, а вільне переміщення переміщає елементи до лівого або правого краю блоку-контейнера, дозволяючи решті вмісту обтікати його.
Позиціонування та вільне переміщення елементів
1. Типи позиціонування
Властивість position дозволяє точно задати нове розташування блоку щодо того місця, де він перебував у нормальному потоці документа. За замовчуванням всі елементи розташовуються послідовно один за одним у порядку, в якому вони визначені в структурі HTML-документа. Властивість не успадковується.
position
Значення:
static	Значення за умовчанням означає відсутність позиціонування. Елементи відображаються послідовно один за одним у порядку, в якому вони визначені в HTML-документі. Використовується для чищення будь-якого іншого значення позиціонування.
relative	Відносно позиціонований елемент зсувається зі свого звичайного місця у різних напрямках щодо меж батьківського контейнера, а простір, що він займав, не зникає. Цей елемент може перекривати інший вміст на сторінці. Якщо щодо позиціонованого елемента одночасно задати властивості top і bottom чи left і right , то першому випадку спрацює лише top , у другому — left . Відносне позиціонування дозволяє задавати z-index елемента, а також абсолютно позиціонувати дочірні елементи всередині блоку.
absolute	Абсолютно позиціонований елемент повністю видаляється з потоку документа і позиціонується щодо меж його блоку-контейнера (іншого елемента або вікна браузера). Блок-контейнер для абсолютно позиціонованого елемента - найближчий елемент-предок, значення якості position якого не дорівнює static. Розташування країв елемента визначається за допомогою властивостей усунення. Простір, який займав такий елемент, хлопається, начебто елемента не існувало на сторінці. Абсолютно позиціонований елемент може перекривати інші елементи або перекритим ними (за рахунок властивості z-index). Будь-який абсолютно позиціонований елемент генерує блок, тобто набуває значення display: block; .
fixed	Фіксує елемент у вказаному місці сторінки. Блоком-контейнером фіксованого елемента є вікно відтворення, тобто елемент завжди фіксується щодо вікна браузера і не змінює свого положення під час прокручування сторінки. Сам елемент у своїй повністю видаляється з основного потоку документа і у новому потоці документа.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

Мал. 1. Різниця між статичним, відносним та абсолютним позиціонуванням
2. Властивості усунення
Властивості описують усунення щодо найближчої сторони блоку-контейнера. Задаються для елементів, котрим значення властивості position однаково static . Можуть приймати як позитивні, і негативні значення. Чи не успадковуються.
Для властивості top позитивні значення переміщують верхній край елемента, що позиціонується нижче, а негативні - вище верхнього краю його блоку-контейнера. Для властивості left позитивні значення зсувають край елемента, що позиціонується вправо, а негативні значення - вліво. Тобто позитивні значення зміщують елемент усередину блоку-контейнера, а негативні - за його межі.
3. Позиціонування всередині елемента
Для блоку-контейнера абсолютно позиціонованого елемента задається властивість position: relative без зсувів. Це дозволяє позиціонувати елементи усередині елемента-контейнера.
.wrap ( padding: 10px; height: 150px; position: relative; background: #e7e6d4; text-align: right; border: 3px dashed #645a4e; ) .white ( position: absolute; width: 200px; ; : 10px; padding: 10px; background: #ffffff; border: 3px dashed #312a22;
Мал. 2. Абсолютне відносне позиціонування
4. Проблеми позиціонування
1. Якщо ширині або висоті абсолютно позиціонованого елемента присвоєно значення auto , то значення буде визначатися шириною або висотою вмісту елемента. Якщо ширина чи висота оголошено явно, саме це значення і буде присвоєно.
2. Якщо всередині блоку з position: absolute розташовані елементи, для яких задано обтікання float , то висота цього елемента дорівнює висоті найвищого з цих елементів.
3. Для елемента з position: absolute чи position: fixed не можна одночасно встановлювати властивість float , а елемента з position: relative — можна.
4. Якщо предок позиціонованого елемента є блоковим елементом, блок-контейнер формується областю вмісту, обмеженою рамкою (border). Якщо предок є рядковим елементом, блок-контейнер формується зовнішньою межею його вмісту. Якщо предка немає, блоком-контейнером є елемент body.
5. Вільне переміщення елементів
У звичайному порядку блокові елементи відображаються, починаючи з верхнього краю вікна браузера до нижнього краю. Властивість float дозволяє переміщати будь-який елемент, вирівнюючи його по лівому або правому краю веб-сторінки або елемента-контейнера, що містить його. При цьому інші блокові елементи будуть його ігнорувати, а малі елементи зміщуватимуться вправо або вліво, звільняючи для нього простір і обтікаючи його.
Мал. 3. Вільне переміщення елементів
Плаваючий блок приймає розміри свого вмісту з урахуванням внутрішніх відступів та рамок. Верхні та нижні відступи margin плаваючих елементів не хлопаються. Властивість float застосовується як до блокових елементів, так і до малих елементів.
Лівий або правий зовнішній край елемента, що переміщається, на відміну від позиціонованих елементів, не може розташовуватися лівіше (або правіше) внутрішнього краю його блоку-контейнера, тобто. виходити за його межі. При цьому якщо для блоку-контейнера задані внутрішні відступи, то плаваючий блок буде відстояти від краю блоку-контейнера на задану відстань.
Властивість автоматично змінює значення властивості display на display: block для наступних значень: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значення inline-table змінює table .
Властивість не впливає на елементи з display: flex і display: inline-flex .
У разі використання властивості float для блокових елементів обов'язково задавати ширину. Тим самим браузер створить місце для іншого вмісту. Але якщо сукупна ширина всіх стовпців виявиться більше доступного місця, останній елемент спуститься вниз.
При цьому вертикальні відступи margin обтічних елементів не хлопаються з відступами сусідніх елементів, на відміну від звичайних блокових елементів.
6. Скасування обтікання елементів
6.1. Властивість clear
Властивість clear визначає, як розташовуватиметься елемент, що йде слідом за плаваючим елементом. Властивість скасовує обтікання з одного або обох сторін елемента, встановлене властивістю float . Для запобігання відображенню фону або меж під плаваючими елементами використовується правило (overflow: hidden;) .
6.2. Очищення потоку стилями за допомогою класу clearfix та псевдокласу: after
Припустимо, є блок-контейнер, для якого не задані ширина та висота. Усередині нього розміщений плаваючий блок із заданими розмірами.
.container ( padding: 20px; background: #e7e6d4; border: 3px dashed #645a4e; ) .floatbox ( float: left; width: 300px; height: 150px; margin-right: 20px; padding: Border: 3px dashed #666666; Мал. 4. "Ефект схлопування" блоку-контейнера
Рішення проблеми:
Створюємо клас.clearfix і в поєднанні з псевдокласом: after застосовуємо його до блоку-контейнера.
.container ( padding: 20px; background: #e7e6d4; border: 3px dashed #645a4e; ) .floatbox ( float: left; width: 300px; height: 150px; margin-right: 20px; padding: ; border: 3px dashed #666666; ) .clearfix:after ( content: ""; display: block; height: 0; clear: both; visibility: hidden; )
Другий варіант очищення потоку:
Clearfix:after (content: ""; display: table; clear: both; )
Мал. 5. Застосування «очищаючого» методу для блоку-контейнера, що містить плаваючий елемент
6.3. Легкий спосіб очищення потоку
Існує ще один прийом очищення потоку для елемента, що містить плаваючі елементи, наприклад, для маркованого горизонтального списку:
Ul ( margin: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; ) li ( float: left; width: calc(100% / 3 - 20px); height: 50px; margin- right: 20px;background: #ffffff;border: 3px dashed #666666; ) li:last-child (margin-right: 0;) Мал. 6. Очищення потоку горизонтального списку
Однією з найкращих сторін CSS є те, що стилі дають нам можливість позиціонувати вміст та елементи на сторінці практично будь-яким чином. Це вносить структурність у наш дизайн та допомагає зробити контент наочнішим.
Є кілька різних типів позиціонування CSS, кожен із цих типів має власну область дії. У цьому розділі ми збираємося поглянути на кілька різних випадків застосування - створення макетів, що багаторазово використовуються, і унікальне позиціонування одноразових елементів, а також опис декількох методів як це зробити.
Позиціювання через float
Один із способів позиціонування елементів на сторінці - через властивість float. Ця властивість досить універсальна і може застосовуватись різними шляхами.
По суті, властивість float бере елемент, прибирає його зі звичайного потоку сторінки та позиціонує ліворуч або праворуч від батьківського елемента. Всі інші елементи на сторінці обтікатимуть такий елемент. Наприклад, абзаци будуть обтікати зображення, якщо елемент встановлено властивість float.
Коли властивість float застосовується до кількох елементів одночасно, це дає можливість створити макет з обтічними елементами, розташованими поруч або навпроти один одного, як показано в багатоколоночному макеті.
Властивість float приймає кілька значень, два найпопулярніші - це left і right, вони дозволяють елементу розташовуватися ліворуч або праворуч від свого батька.
Img (float: left;)
float на практиці
Давайте створимо загальний макет сторінки з шапкою вгорі, двома колонками у центрі та підвалом внизу. В ідеалі, цю сторінку слід розмітити за допомогою елементів
,
,