,

,

,

. Тег
досить часто використовується у верстці сучасних сайтів для створення сіток та позначає просто якийсь блок чи контейнер. У нього допустимо вкладати й інші теги, що можливо не з усіма блоковими елементами, тому
зручно використати. Блоки зазвичай розташовуються один над одним і не вставляються в малі елементи. До малих елементів HTML відноситься текст, а CSS використовується для його оформлення.
При заданій ширині контенту загальна ширина блоку складається із значень правого та лівого відступу, полів, меж та ширини. При заданій висоті - з верхнього та нижнього відступу, полів, кордонів та висоти. Текст у блокових елементах вирівнюється за умовчанням по лівому краю. Якщо одному з них знаходяться рядкові елементи разом із блоковими, то навколо малих створюється анонімний блок. Для нього буде застосовано стиль за промовчанням. Також він успадкуватиме заданий стиль, присвоєний його батькові.
Потік документа
Потоком називає порядок відображення елементів сторінки, що визначається заданими в CSS властивостями. При цьому за замовчуванням блоки вишиковуються зверху вниз, а малі теги при нестачі місця переносяться на новий рядок і розташовуються зверху вниз і зліва направо. Розташування елемента на сторінці залежить від його місця в коді: чим він вищий, отже, тим раніше він знаходиться. Кожен із блокових елементів виглядає як прямокутник, який відштовхує від себе сусідні. Змінити таку поведінку можна за допомогою спеціальних властивостей. Вирівнювання в CSS певних блоків по центру або сторонам контейнера називається позиціонуванням.
Позиціювання елементів
Розташуванням блоків можна керувати за допомогою абсолютного та відносного позиціонування. Позиціонування застосовують, щоб встановити великі розділи на сторінці певне місце, для створення складних інтерфейсів, спливаючих вікон і декоративних елементів. Основна властивість, що використовується для позиціонування блоків CSS - position. У нього є чотири основні властивості:
• relative;
• absolute;
• fixed;
• static.
З їх допомогою можна перемикати режими розташування, задаючи один із чотирьох параметрів: top, right, bottom або left. Існує також властивість для упорядкування шарів – z-index. Позиціонування зі властивістю static зазвичай не використовується, оскільки воно означає розташування блоків за умовчанням. Тому застосування будь-яких параметрів на нього не впливає. Для верстки використовуються решта трьох властивостей: relative, absolute, fixed.
Відносне позиціонування
Відносне позиціонування блоків CSS, тобто властивість position: relative, означає, що елемент можна перемістити і змінити його вихідне розташування. Такий блок все одно залишається у потоці. Насправді зміщується не він сам, а його копія. Вказуються значення властивостей для точної вказівки, наскільки зміститься блок у той чи інший бік. Вимірюються вони найчастіше у пікселях. Але можна використовувати й інші одиниці.

Використання властивостей при відносному позиціонуванні
Властивість top зміщує копію певного блоку вгору або вниз на кількість пікселів, яке зазначено у властивості. При його використанні елементи, розташовані нижче або вище, залишаються на своїх місцях, так як насправді і блок, що зміщується, теж нікуди не зрушується.
Властивість bottom зміщує блок у протилежній властивості top напрямку. Позитивне значення допомагає змістити його вгору, а негативне вниз. Властивості right і left зсувають елемент праворуч і ліворуч відповідно. Комбінуючи їх усі, можна задавати блоку точне розташування на сторінці, зміщуючи його по вертикальній та горизонтальній осі координат. Якщо збільшити відступи, вони будуть розраховуватися не від краю самого блоку, а від його копії, що зміщена в бік.

Абсолютне позиціонування
Абсолютне позиціонування блоків CSS задається значенням absolute властивості position. Елемент, який абсолютно позиціонований, випадає з потоку документа, а його місце займають сусідні блоки. Ширина такого елемента розтягується в залежності від його вмісту, і змістити його можна, задавши певні значення властивостям top, left, right, bottom. Абсолютне позиціонування блоків CSS зручно використовувати для заголовків. Але спрацьовує position: absolute не тільки для блокових, але і для малих елементів.
Вирівнювання елементів по центру
Спозиційований абсолютно малий елемент поводитиметься так само, як і малий. Тому за допомогою позиціонування можна керувати CSS і текстом. До нього можна застосовувати деякі нові властивості, наприклад, змінювати висоту та ширину. Для центрування і вирівнювання по вертикалі CSS використовується комбінування декількох властивостей. Керує вирівнюванням по вертикалі якість top. Якщо потрібно розмістити блок CSS по центру, основний контейнер при цьому повинен бути відносно спозиціонованим, а елемент, що вирівнюється, - спозиціонованим абсолютно. Контейнеру необхідно встановити властивість top: 50%, а переміщення елемента на половину своєї висоти використовувати властивість translate зі значенням “0, -50%”. Абсолютно спозиционированные елементи можна назвати новий тип, оскільки до них застосовуються властивості, недоступні інших видів позиціонування.

Позиціонування щодо верхнього лівого кута браузера
Властивості left, top, right та bottom з абсолютно і відносно позиціонованими елементами працюють по-різному. Для відносних елементів ці властивості задають зміщення щодо місця, де знаходиться елемент. Абсолютно споціціоновані займають місце щодо певної системи координат, прив'язаної до розмірів вікна браузера. Початковими точками цієї системи є кути вікна. При використанні властивості left відступ буде відраховуватись від лівого боку браузера, але смуги прокручування при цьому не виникне. Властивість top при абсолютному позиціонуванні задає відступ від верхньої сторони браузера до верхньої частини елемента, якого воно застосовано. Комбінуючи обидві властивості, елемент можна переміщати щодо верхнього лівого кута браузера.

Позиціювання щодо правого верхнього кута браузера
Аналогічно за допомогою властивостей right і top можна притискати елемент до правої частини вікна браузера і змінювати його розташування по вертикалі, зміщуючи правий верхній кут. При негативному значенні властивості right блок зміститься за межі вікна. Після цього має з'явитися смуга прокручування. Для усунення елемента вниз використовується властивість bottom. Воно визначає відступ від нижнього краю вікна браузера до нижньої частини блоку. При негативному значенні також з'являється смуга прокручування, так як елемент зміщується за нижню межу вікна браузера.
Система координат при абсолютному позиціонуванні
За замовчуванням усі елементи, яким задано абсолютне позиціонування, прив'язані до однієї системи координат – вікна браузера. Але її можна змінити, якщо задати якомусь батьківському елементу відносне позиціонування. Тоді дочірній блок змінюватиме своє місце розташування залежно від батьківського. Якщо серед батьківських елементів буде кілька з відносним позиціонуванням, тоді відлік ведеться від найближчого з них. При цьому стандартне позиціонування буде від того, що задано в тезі body.

Точка відліку для абсолютно позиціонованого елемента
До того, як елементу було задано абсолютне позиціонування, він перебував на якомусь місці, яке називається неявною точкою відліку. Якщо такому блоку не встановити властивості, він не зрушить з місця. Змістити його можна, якщо задати властивість margin. Воно спрацює аналогічно до властивостей позиціонування. Якщо не визначити значення властивості left і решти, тоді воно дорівнюватиме auto. Також за допомогою auto можна повертати елементи на свої колишні місця.

Фіксоване позиціонування
Ще одне значення – fixed. Властивість position закріплює елемент на певному місці. Фіксоване позиціонування часто використовується для створення меню CSS. Воно схоже на абсолютне, але фіксований блок випадає із потоку. Навіть при прокручуванні сторінки такий елемент залишиться на своєму місці, тому його зручно використовувати для створення меню CSS. Точка відліку буде прив'язана до вікна браузера. Якщо ж спозиционированных блоків виявляється кілька, їх упорядкування використовується властивість z-index. З його допомогою можна перекривати відносні блоки абсолютними, якщо задати їм відповідний індекс, виражений цілим числом. Чим воно більше, тим вище буде блок.
У наші дні веб-розробники можуть створювати складні розкладки веб-сторінок, використовуючи різні техніки CSS. Деякі з цих технік мають довгу історію (флоати), інші (флексбокс) досягли популярності останніми роками.
У цій статті ми уважно розглянемо деякі маловідомі речі щодо CSS-позиціонування .
Перед початком, давайте коротко згадаємо основи різних типів позиціонування.
Огляд доступних способів позиціонування
Властивість CSS position визначає тип позиціонування елемента.
Опції для позиціонування
static – це значення властивості позиціонування за умовчанням. Ми повідомляємо, що цей елемент не використовує позиціонування - позиціонування застосовується лише якщо задати тип позиціонування, відмінний від дефолтного.
Для цього треба властивості position задати одне з наступних значень:
• relative
• absolute
• fixed
• sticky
І лише після завдання позиціонування, можна використовувати властивості, що зміщують елемент:
• right
• bottom
• Початкове значення цих властивостей - ключове слово auto.
Потрібно враховувати, що якщо елемент має властивість position у значенні absolute або fixed , то він є абсолютно позиціонованим елементом. Також у позиціонованих елементів починає працювати властивість z-index, що визначає порядок накладання.
Відмінності між основними способами позиціонування
Тепер швидко розглянемо три базові різницю між доступними типами позиціонування:
• абсолютно (absolute) позиціоновані елементи повністю видаляються з потоку, їхнє місце займають найближчі сусіди.
• щодо позиціоновані (relative) і приклеєні (sticky) зберігають своє місце у потоці та його найближчі сусіди не займають його. Однак відступи цих елементів не займають простір, а повністю ігноруються іншими елементами і це може спричинити накладення елементів.
• фіксовані (fixed) елементи (а фіксоване позиціонування є різновидом абсолютного) завжди позиціонуються щодо зони видимості (ігноруючи наявність позиціонування у предків), тоді як приклеєні елементи позиціонуються щодо найближчого предка зі скролінгом (overflow:auto). І лише за відсутності таких предків вони позиціонуються щодо зони видимості.
Докладніше це можна розглянути в демо:
Примітка: позиціонування “приклеєних елементів” досі є експериментальною технологією з обмеженою підтримкою у браузерах. Звичайно, за бажання ви можете використовувати поліфіл, щоб додати цей функціонал у браузер, але з урахуванням малої поширеності ця властивість у статті не обговорюватиметься.
Позиціонування елементів із абсолютним типом позиціонування
Я впевнений, більшість знає принцип роботи абсолютного позиціонування. Однак новачків багато в ньому може збентежити.
Тому я вирішив почати з нього при описі маловідомих особливостей позиціонування.
Отже, абсолютно позиціонований елемент зміщується щодо свого найближчого предка, що спозиційується. Звичайно, це працює, якщо у кого-небудь з предків position відрізняється від static - якщо елемент не має спозиційованих предків, він зміщується щодо зони видимості.
Це демонструється наступним прикладом:
У цьому демо зелений блок спочатку спозиційований абсолютно з нульовими відступами bottom: 0 і left: 0, його предку (червоному блоку) позиціонування не ставилося взагалі.
Однак, ми відносно позиціонували зовнішню обгортку (елемент із класом jumbotron). Зауважте, як змінюється позиціонування зеленого блоку при зміні типу позиціонування його предків.
Абсолютно позиціоновані елементи ігнорують властивість float
Якщо ми застосовуємо до плаваючого елемента абсолютне або фіксоване позиціонування, властивість float отримає значення none. З іншого боку, якщо ми поставимо відносне позиціонування, елемент залишиться плаваючим.
Погляньте на відповідне демо:
У цьому прикладі ми визначаємо два різні елементи, що спливають праворуч. Зауважте, що коли червоний блок стає абсолютно позиціонованим, він ігнорує значення властивості float , тоді як відносно спозиційований зелений блок зберігає значення float .
Абсолютно позиціоновані малі елементи стають блоковими
Рядковий елемент з абсолютним або фіксованим позиціонуванням набуває властивостей блокового елемента. Докладніше конвертація малих елементів у блокові описана в таблиці.
У цьому випадку ми створили два різні елементи. Перший (зелений блок) це блоковий елемент, а другий (червоний блок) – малий. Спочатку видно лише зелений блок.
Червоний блок не видно тому, що задані властивості width і height працюють тільки з блочними і рядково-блочними елементами, а так як в ньому немає контенту, у нього немає жодних розмірів.
При завданні червоного блоку абсолютного або фіксованого позиціонування, він стає блоковим і задані в ньому розміри блоку починають діяти.
У абсолютно позиціонованих елементів немає схлопування зовнішніх відступів
За умовчанням, коли два вертикальних зовнішніх відступу стикаються, вони об'єднуються в один, рівний максимальному з них. Це називається схлопування зовнішніх відступів.
Поведінка абсолютно позиціонованих елементів тут схожа на плаваючі елементи - їх відступи не поєднуються із сусідніми.
У цьому демо елементу заданий відступ 20 пікселів. Його відступ колапсує з відступом батьківського елемента, який також дорівнює 20 пікселям. Як бачите, тільки за абсолютного позиціонування схлопування не відбувається.
Але як ми можемо запобігти хлопуванню відступів? Нам потрібно помістити між ними якийсь роздільник.
Це може бути внутрішній відступ (padding) або кордон (border), їх можна застосовувати як до батьківського, так і дочірнього елемента. Інший варіант – додати клірфікс до батьківського елементу.
Позиціонування елементів з пікселями та відсотками
Чи використовували ви колись проценти замість пікселів для позиціонування елементів? Якщо відповідь так, то ви знаєте, що усунення елемента залежить від вибраних одиниць обчислення (пікселів або відсотків).
Це трохи бентежить, правда? Отже, спочатку подивимося, що каже специфікація про усунення у відсотках:
Зміщення у відсотках від ширини (для left та right) або висоти (top або bottom) батьківського блоку. Для приклеєних елементів зсув розраховується у відсотках від ширини (для left і right) або висоти (top або bottom) потоку. Допустимі негативні значення.
Як було сказано, при заданні усунення у відсотках, позиція елемента залежить від ширини та висоти його батька.
Демо показує цю різницю:
У цьому прикладі для усунення використовуються пікселі та відсотки. Звичайно, при завданні усунення в пікселях елемент зрушується туди, куди треба.
А якщо ми виберемо відсотки для усунення, результат залежатиме від розмірів батьківського елемента. Ось візуалізація, яка показує, як розраховується нова позиція:
Примітка: як ви, мабуть, знаєте, властивість transform (разом з різними функціями translate) також дозволяє змінити позицію елемента. Але в цьому випадку при використанні відсотків розрахунок відбуватиметься на основі розміру самого елемента, а не його батька.
Висновок
Я сподіваюся, що ця стаття допомогла вам краще зрозуміти позиціонування CSS і пояснила основні складності.
При відносному позиціонуванні блоку слід задати властивість position:relativeта властивості усунення. Зміщення в цьому випадку відбуватиметься не щодо "батьківського" елемента (як при абсолютному позиціонуванні), а щодо самого блоку нормального потоку. Це буде зрозуміліше на прикладі. Нехай у нас є html-сторінка з трьома div-ами:
Відносне позиціонування
Давайте задамо в таблиці стилів розміри та межі цих блоків:
#blok1, #blok2, #blok3 ( border:1px solid red; width:150px; height:50px; )
Зараз наша сторінка у браузері виглядає так:
Тепер давайте змінимо положення другого блоку, для цього додамо до сторінки стилів правило:
#blok1, #blok2, #blok3 ( border:1px solid red; width:150px; height:50px; ) #blok2( position:relative; left:50px; top:25px; )
Тепер наша сторінка виглядає так:

Наш другий блок змістився вниз і вправо щодо того місця, де він перебував у нормальному потоці. Інші блоки залишилися на своїх місцях. Практично відносне позиціонування застосовується досить рідко, тому ми більше не приділятимемо цьому увагу і розглянемо плаваючі блоки.
Плаваючі блоки
Ці блоки не можна позиціонувати з точністю до пікселя, як у попередніх схемах, але ця схема позиціонування дуже поширена. Без плаваючих блоків обходиться рідкісний сайт, а вже зробити гумову верстку сайту без них і зовсім неможливо.
Такі блоки можуть вільно переміщатися по сторінці, подібним чином поводяться картинки в HTML, вирівняні за допомогою параметра align.
Плаваючі блоки визначаються властивістю float, який визначає чи буде блок плаваючим і в який бік він переміщатиметься. Можливі три варіанти:
• left- блок притискається до лівого краю, решта елементів обтікає його з правого боку.


• right- блок притискається до правого краю, решта елементів обтікає його з лівого боку.


• none- блок не переміщається та позиціонується згідно з властивістю position.
Давайте подивимося на прикладі. Нехай у нас є html-сторінка з наступним кодом:
Позиціонування блоків
Текст блоку 1
І сторінка style.css з наступним кодом:
#blok1( border:1px solid red; width:150px; height:50px; )
Зараз наша сторінка у браузері виглядає так:
Давайте зробимо наш блок плаваючим і притиснемо його до лівого краю:
#blok1( border:1px solid red; width:150px; height:50px; float:left; )
Тепер давайте притиснемо блок до правого краю:
#blok1( border:1px solid red; width:150px; height:50px; float:right; )
Тепер наша сторінка у браузері виглядає так:
А що буде, якщо плаваючих блоків на сторінці кілька? Давайте додамо в нашу html-сторінку ще один блок:
Позиціонування блоків
Текст блоку 1
Текст блоку 2
Просто якісь елементи на сторінці. Це може бути просто текст, посилання, списки, зображення і т.д.
І поставимо їм різні значення властивості float:
#blok1( border:1px solid red; width:150px; height:50px; float:left; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; )
Тепер наша сторінка у браузері виглядає так:
А якщо в них будуть однакові значення? Наприклад:
#blok1( border:1px solid red; width:150px; height:50px; float:left; ) #blok2( border:1px solid red; width:150px; height:50px; float:left; )
Тоді другий блок притиснеться до правого краю першого блоку:
Аналогічно буде ситуація за однакових значень right:
#blok1( border:1px solid red; width:150px; height:50px; float:right; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; )
Зверніть увагу: спочатку до правого краю притисне блок 1, а вже до нього притисне блок 2.
А що робити, якщо ми хочемо, щоб блоки були притиснуті до правого краю, але були б один під одним. Для цього існує властивість clearяке визначає, які сторони плаваючого блоку не можуть сусідити з іншими плаваючими блоками. У цієї властивості може бути задане одне з чотирьох значень:
• left- блок повинен розташовуватися нижче за всі лівосторонні блоки.


• right- блок повинен розташовуватися нижче за всі правосторонні блоки.


• both- блок повинен розташовуватися нижче за всі плаваючі блоки.


• none- ніяких обмежень немає, це значення за промовчанням.


Давайте в нашому останньому прикладі поставимо цю властивість для другого блоку:
#blok1( border:1px solid red; width:150px; height:50px; float:right; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; clear:right; )
Тепер вийшло так, як і хотілося: один блок під іншим:

У попередньому уроці ми з вами за допомогою абсолютного позиціонування робили таку сторінку:

Давайте подивимося, як її можна зробити за допомогою плаваючих блоків. Отже, код самої сторінки наступний:
Позиціонування блоків
шапка сайту
Контент
блок новин
низ сайту
На сторінці style.css задамо спочатку розміри та фон для наших блоків:
#header( background:darkred; width:715px; height:100px; ) #menu( background:oldlace; width:190px; height:300px; ) #content( background:oldlace; width:525px; height:300px; ) #fo ( background:darkred; width:715px; height:30px; ) #news( background:yellow; width:150px; height:280px; )
Нині наші блоки розташовуються у нормальному потоці, тобто. один під одним. Нам треба зробити блоки menuі contentплаваючими та лівосторонніми. А блок newsмає притискатися до правого краю, тобто. його ми зробимо правостороннім плаваючим блоком:
#header( background:darkred; width:715px; height:100px; ) #menu( background:oldlace; width:190px; height:300px; float:left; ) #content( background:oldlace; width:525px; height:300px ; float:left; ) #footer( background:darkred; width:715px; height:30px; ) #news( background:yellow; width:150px; height:280px;
Наша сторінка у браузері виглядає так:

Подивимося на наш блок новин, видно, що він знаходиться нижче тексту в блоці content. Адже ми хотіли, щоб блок новин був праворуч, а текст обтікав би його ліворуч.
Чому ж у нас так не вийшло? Тому що наш блок newsу html-коді розташовується нижче тексту і його обтікатиме лише той текст, який розташований нижче за нього. Щоб виправити це треба помістити наш div="news"вище тексту (тобто до слова "контент"):
Позиціонування блоків
шапка сайту
блок новин
Контент
низ сайту
Ось тепер наш блок новин знаходиться на своєму місці:

А щоб він не притискався впритул до верхнього та правого країв, ми додамо для цього блоку значення полів:
#news( background:yellow; width:150px; height:280px; float:right; margin:10px; )
Тепер ми досягли такого ж результату, як і при абсолютному позиціонуванні.

Погодьтеся, що за допомогою плаваючих блоків верстати сторінку простіше: не треба розраховувати пікселі, та й код коротший. До того ж при гумовій верстці ми і не можемо вказати точне розташування блоку на екрані, а за допомогою плаваючих блоків нам це і не потрібно, достатньо вказати лише орієнтир (ліворуч, праворуч, нижче або в тій же лінії).
Фіксовані блоки
Як ви пам'ятаєте, при фіксованому позиціонуванні блок фіксується щодо області перегляду. У певному сенсі фіксовані блоки нагадують фрейми. Тільки всередині кадру доступне прокручування, а всередині блоку немає.
У фіксованих блоків є одна істотна вада: вони не підтримуються браузерами Internet Explorer. А тому використовувати їх поки що не слід. Тому тут лише вкажемо синтаксис такого правила, якщо хочете спробуйте самі (наприклад, у браузері Opera).
#blok( position:fixed; left:0px; top:0px; )
Блок з ідентифікатором "blok" при прокручуванні сторінки залишатиметься на місці.
На сьогодні все. У наступному уроці ми познайомимося ще з деякими властивостями блоків та їх видами.
Блоковий елемент HTML - це такий елемент, який займає за замовчуванням всю ширину батьківського елемента. Батьківським елементом може бути інший блоковий елемент або вікно браузера. Блоковому елементу за допомогою властивостей CSS можна встановити ширину (width) і висоту (height). Позиціонуванням блокових елементів називається процес їх розташування всередині вікна браузера та відносного друга за допомогою CSS властивостей position, left, top, right та bottom. Властивість CSS position призначена для завдання одного з чотирьох доступних видів позиціонування: static (за умовчанням), absolute (абсолютна), fixed (фіксована) та relative (відносна). Інші CSS властивості, а саме left, top, right і bottom призначені для завдання відстаней щодо лівого, верхнього, правого та нижнього краю батьківського елемента. Також блокові елементи при заданні певних властивостей можуть накладатися один одного, і цю можливість можна використовувати на сайтах.
За замовчуванням (static)
Якщо ви не вказали position у блокового елемента або вказали static , що те саме, то в такому випадку блокові елементи розташовуються по порядку. Причому наступний блок (наприклад: червоний) розташовується з нового рядка. Також на дане позиціонування не діє завдання відстаней left, top, right і bottom.



Абсолютне позиціонування (absolute)
При абсолютному позиціонуванні положення елемента задається щодо країв вікна браузера за допомогою відстаней, що задаються властивостями left, top, right та bottom. Якщо вказати відстані left і right одночасно, і вони будуть суперечити між собою, то перевага віддається left , те саме стосується top і bottom , в яких більший пріоритет має відстань top . Абсолютне позиціонування застосовується дуже часто спільно з відносним позиціонуванням у дизайнерських цілях, коли необхідно розмістити різні елементи відносного один одного, так само може застосовуватися для створення меню, розмітки сайту і т.д.




Фіксоване позиціонування (fixed)
Фіксоване позиціонування відрізняється від інших видів позиціонування та не переміщається разом із контентом при скролінгу сторінки. Блокові елементи з фіксованим позиціонуванням прив'язуються за допомогою властивостей left, top, right та bottom до країв вікна браузера. Фіксоване позиціонування застосовується для створення фреймових інтерфейсів (вікно браузера ділиться на кілька областей), фіксованого меню, фіксованого підвалу сайту та "постійних" блоків (перелік посилань, соціальні кнопки тощо).




Відносне позиціонування (relative)
Відносне позиціонування задається за допомогою відстаней left, top, right і bottom щодо його поточного положення.




Однак таке положення блоку можна створити за допомогою властивості margin (відступи).



Відносне позиціонування не цікаво використовувати саме собою, воно переважно застосовується разом із абсолютним позиціонуванням.
Розглянемо варіанти:


Вони працюють із усіма позиціонованими елементами, крім статичних.
Приклад позиціонування.
Елементи можуть перекривати одне одного!
Відображення елемента над рештою!
Властивість position має 4 значення: static, fixed, relative та absolute. Кожне з цих значень буде показано нижче з прикладом використання.
Перед тим, як детально розібрати всі види позиціонування елементів на сторінці, нам доведеться розглянути, що таке потік документа.
Потік документа
За замовчуванням елементи на веб-сторінці відображаються в порядку, в якому вони представлені в HTML-документі, тобто блокові елементи займають всю доступну для них ширину і укладаються вертикально один під одним. Рядкові елементи вишиковуються по горизонталі до тих пір, поки не буде зайнята вся доступна ширина, після того, як вся ширина буде зайнята, буде зроблено перенесення рядка і все піде по новій. Такий порядок розташування елементів називається нормальним потоком(його також називають потоком документаабо загальним потоком).
За допомогою властивості float або position можна прибрати елемент із нормального потоку. Якщо елемент "випадає" з нормального потоку, елементи, які розташовані в коді нижче цього елемента будуть зміщені на його місце на веб-сторінці.
Статичне позиціонування
Статичним називають позиціонування за замовчуванням для всіх елементів на веб-сторінці. Якщо до елемента не застосовувати властивість position , він буде статичним і відображатиметься на веб-сторінці відповідно до загального потоку елементів.
При застосуванні властивостей CSS top , left , right або bottom до статично позиціонованого елемента, вони будуть ігноруватися.
Якщо є необхідність, то можна задати статичне позиціонування таблиці стилів за допомогою значення static:
Перший абзац.
Другий абзац.


Спробувати »
Фіксоване позиціонування
Елементи з фіксованим позиціонуванням розміщуються на сторінці щодо вікна браузера. Такі елементи видаляються із загального потоку, елементи, що йдуть у потоці за фіксованим елементом, ігноруватимуть його, зміщуючи і займаючи його місце на веб-сторінці.
Варто звернути увагу, що елементи з фіксованим позиціонування можуть перекривати інші елементи, приховуючи їх повністю або частково. При прокручуванні довгих сторінок вони створюють ефект нерухомих об'єктів, залишаючись на тому самому місці:

Текст Текст Текст Текст Текст Текст Текст Якийсь текст Текст Текст Текст Текст Текст Текст


Спробувати »
Відносне позиціонування
Елементи з відносним позиціонуванням, як і статичні елементи, залишаються у потоці. При застосуванні властивостей top , left , right або bottom до відносно позиціонованих елементів вони зміщуватимуться щодо свого розташування, залишаючи порожній простір там, де елемент розташовувався спочатку.
Такі елементи не впливають на розташування елементів, що оточують їх, інші елементи залишаються на своїх місцях і можуть бути перекриті щодо позиціонованим елементом:
Заголовок першого рівня.
Щодо позиціонований заголовок.
Заголовок третього рівня.


Спробувати »
Примітка: елементи з відносним позиціонуванням (relative) зазвичай використовують як батьків для елементів з абсолютним позиціонуванням (absolute).
Абсолютне позиціонування
Елементи з абсолютним позиціонуванням повністю видаляються із загального потоку, інші елементи займатимуть простір, що звільнився, повністю ігноруючи абсолютно позиціоновані елементи. Потім можна позиціонувати елемент у будь-яке місце веб-сторінки, використовуючи властивості top , left , right або bottom .
Всі абсолютно позиціоновані елементи розміщуються щодо вікна браузера або відносно найближчого предка (якщо він є), у якого властивість position має значення absolute , fixed або relative .

Змінимо розташування логотипу за допомогою абсолютного позиціонування.
Тепер логотип розташовуватиметься у правому верхньому кутку сторінки.


Спробувати »
Перекриваючі елементи
Коли елементи знаходяться поза загальним потоком сторінки, вони можуть перекривати один одного. Зазвичай порядок розташування елементів відповідає їх порядку в HTML-коді сторінки, проте є можливість керувати порядком перекриття за допомогою CSS властивості z-index , чим більше значення, тим вище буде елемент.
z-index: 1;
z-index: 0;
z-index: 2;