CSS - позиціонування блоків. Абсолютне і відносне позиціонування

У мові HTML всі елементи можна розділити на блокові і малі. Блокові елементи зазвичай представляються як прямокутні області з деякою кількістю інформації. З їх допомогою вибудовується сітка сторінки. Такі елементи займають весь доступний простір по ширині, а до і після них зазвичай присутній перенесення рядка. Блокам можна задавати відступи, горизонтальні та вертикальні розміри.

Особливості блочних елементів

До блочних належать теги, що виділяють велику кількість текстової інформації: ,

, ,

,

, . Тег досить часто використовується у верстці сучасних сайтів для створення сіток і означає просто якийсь блок або контейнер. У нього допустимо вкладати і інші теги, що можливо не з усіма блочними елементами, тому зручно використовувати. Блоки зазвичай розташовуються один над одним і не вставляються в рядкові елементи. До рядковим елементів 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 напрямку. Позитивне значення допомагає змістити його вгору, а негативне - вниз. Властивості і left right зрушують елемент вправо і вліво відповідно. Комбінуючи їх, можна задавати блоку точне розташування на сторінці, зміщуючи його по вертикальній і горизонтальної осі координат. Якщо збільшити відступи, вони будуть розраховуватися не від краю самого блоку, а від його зміщеною у бік копії.

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

Абсолютне позиціонування блоків в 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 при абсолютній позиціонуванні задає відступ від верхнього боку браузера до верхньої частини елемента, до якого воно застосовано. Комбінуючи обидва властивості, елемент можна переміщати відносно лівого верхнього кута браузера.

Позиціонування щодо правого верхнього кута браузера

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

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

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

Точка відліку для абсолютно позиційованого елемента

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

Фіксоване позиціонування

Ще одне значення - fixed. Властивість position закріплює елемент на якомусь певному місці. Фіксоване позиціонування часто використовується для створення меню CSS. Воно схоже на абсолютне, але фіксований блок випадає з потоку. Навіть при прокручуванні сторінки такий елемент залишиться на своєму місці, тому його зручно використовувати для створення меню CSS. Точка відліку при цьому буде прив'язана до вікна браузера. Якщо ж спозиційованих блоків виявляється трохи, для їх упорядкування використовується властивість z-index. З його допомогою можна перекривати відносні блоки абсолютними, якщо задати їм відповідний індекс, виражений цілим числом. Чим воно більше, тим вище буде знаходитися блок.