CSS Position: Гайд для початківців з прикладами використання

У сучасній веброзробці правильне управління елементами на сторінці є критично важливим для досягнення бажаного вигляду та функціональності інтерфейсу. І один з важливих інструментів для цього – позиціонування елементів за допомогою CSS. Без розуміння основ позиціонування більшість Figma-макетів дизайнерів не могли б бути реалізовані в повній мірі.

Як IT-компанія, ми часто працюємо з різними типами позиціонування, щоб створювати сучасні, гнучкі та зручні інтерфейси користувача. Вміння грамотно використовувати ці типи – це не просто «покращення дизайну», це важливий крок до  покращення досвіду для користувачів, тобто це і про UI, і про UX.

Знання основ позиціонування допомагає:

• Контролювати розташування елементів на сторінці, забезпечуючи правильну візуалізацію та поведінку контенту.
  
  
• Створювати адаптивні макети, що виглядають коректно на різних пристроях і екранних роздільних здатностях.
  
  
• Реалізовувати складні інтерфейси, такі як модальні вікна, меню або перетягувані елементи.
  
  

Якщо ви прагнете створювати ефективні, інтуїтивно зрозумілі вебзастосунки, потрібно мати чітке розуміння того, як працює CSS позиціонування і чому воно так важливе.

Що таке CSS position?

Властивість position в CSS визначає метод позиціонування елемента на веб-сторінці. Розуміння різних значень цієї властивості є ключем до точного контролю над розміщенням елементів.

Основні значення властивості position

Існує п'ять основних значень властивості position:

• static
• relative
• absolute
• fixed
• sticky

Давайте розглянемо кожне з них детальніше.

1. static – поведінка за замовчуванням

Це значення є значенням position за замовчуванням для всіх HTML-елементів. Елементи зі значенням position: static; розміщуються у звичайному потоці документа. Це означає, що вони відображаються в тому порядку, в якому вони з'являються в HTML-коді, один за одним (зверху вниз для блокових елементів і зліва направо для рядкових елементів).

Важливо: Для елементів зі значенням position: static; властивості top, right, bottom і left не діють.

HTML

<div class="static">Block 1</div>

<div class="static">Block 2</div>

<div class="static">Block 3</div>

‍

В цьому випадку "Block 2" відобразиться під "Block 1",  "Block 3" під "Block 2" у звичайному потоці:

‍

‍

🚫 Чи випадає з потоку? – Ні, залишається в потоці на своєму місці.
🧭 Відносно чого позиціонується? – Не позиціонується.

2. relative – відносне позиціонування

Значення position: relative; спочатку розміщує елемент у його звичайному положенні в потоці документа, але потім дозволяє зміщувати його відносно цього початкового положення за допомогою властивостей top, right, bottom і left.

Важливо: Інші елементи на сторінці поводяться так, ніби елемент все ще знаходиться на своєму початковому місці. Тобто, відносне позиціонування не впливає на положення сусідніх елементів у потоці.

HTML

<div class="static">Block 1</div>

<div class="relative">Block 2</div>

<div class="static">Block 3</div>

‍

CSS

.relative {

   position: relative;

   left: 30px;

   top: 15px;

   border: 2px dotted green;

   background: lightgreen;

}

‍

"Block 2" буде відображено на 30 пікселів правіше та на 15 пікселів нижче від свого звичайного положення. "Block 1" і "Block 3" при цьому залишаться на своєму звичайному місці.

‍

‍

✅ Чи випадає з потоку? – Ні.
🧭 Відносно чого позиціонується? – Відносно свого початкового положення в звичайному потоці.

Використання

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

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

‍

3. absolute – абсолютне позиціонування

Елемент зі значенням position: absolute; видаляється зі звичайного потоку документа. Це означає, що інші елементи на сторінці будуть розміщуватися так, ніби цього елемента не існує. Потім елемент позиціонується відносно його найближчого позиціонованого предка. Позиціонованим предком є будь-який батьківський елемент, для якого встановліено значення position, відмінне від static (наприклад, relative, absolute, fixed або sticky).

Якщо абсолютно позиціонований елемент не має позиціонованих предків, він позиціонується відносно початкового контейнера (зазвичай це елемент <html> або вікно браузера).

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

HTML

<div class="relative-container">

   <div class="static">Block 1</div>

   <div class="absolute">Block 2</div>

   <div class="static">Block 3</div>

</div>

‍

CSS

.relative-container {

   position: relative;

   border: 2px solid blue;

}

.absolute {

   position: absolute;

   right: 25px;

   top: 15px;

   border: 2px dotted green;

   background: lightgreen;

}

‍

В цьому випадку зелений елемент "Block 2" буде розміщено на 15 пікселів зверху та 25 пікселів справа відносно синього батьківського елементу, оскільки останній має position: relative;. Елемент "Block 3", хоча і розташований в html-розмітці нижче за зелений "Block 2", але підніметься вгору, ніби зеленого елемента не існує:

‍

‍

Це і означає, що елемент випадає з потоку, тобто інша розмітка поводе себе так, ніби цього елемента не існує.

✅ Випадає з потоку? – Так.
🧭 Відносно чого позиціонується? – Відносно свого найближчого позиціонованого предка (якщо таких немає, то відносно початкового контейнера)

Використання

Часто використовується для реалізації спливаючих елементів, розміщення іконок в контейнерах, модальних вікон, меню, елементів, які можна перетягувати по сторінці, складних макетів з перекриттям елементів.

4. fixed – фіксоване позиціонування

Елемент зі значенням position: fixed; також видаляється зі звичайного потоку документа і позиціонується відносно вікна браузера (viewport). Це означає, що елемент залишається на одному і тому ж місці на екрані, навіть якщо користувач прокручує сторінку.

Властивості top, right, bottom і left використовуються для визначення положення фіксованого елемента відносно країв вікна браузера.

HTML

<nav class="fixed-menu">

   <a href="#">Home</a>

   <a href="#">HTML</a>

   <a href="#">CSS</a>

</nav>

<!-- -->

<button class="up-btn">🡑</button>

‍

CSS

.fixed-menu {

   position: fixed;

   left: 0;

   right: 0;

   top: 0;

   border: 2px solid blueviolet;

}

.up-btn {

   position: fixed;

   right: 1.25em;

   bottom: 1.25em;

   border: 2px solid blue;

}

У цьому випадку навігаційне меню (з фіолетовою межею) з класом .fixed-menu буде прилипати до верхньої частини вікна браузера (top: 0;) і розтягуватися на всю його ширину (left: 0;, right: 0;). Це означає, що між меню та краями вікна браузера зверху і по боках не буде жодних відступів.

Кнопка (обведена синім) з класом .up-btn буде зафіксована в правому нижньому куті екрана. Властивості right: 1.25em; та bottom: 1.25em; створюють відступ між правим краєм кнопки та правим краєм вікна браузера, а також між нижнім краєм кнопки та нижнім краєм вікна браузера. Величина цього відступу становить 1.25em (що є відносною одиницею і залежатиме від розміру шрифту).

Навіть при прокручуванні сторінки обидва ці елементи залишатимуться на своїх місцях, зберігаючи задане позиціонування та відступи від країв вікна браузера:

‍

‍

✅ Випадає з потоку? – Так
🧭 Відносно чого позиціонується? – Вікно браузера

Використання

За допомогою фіксованого позиціонування зручно реалізовувати кнопки для прокручування сторінки, фіксовані панелі або банери. 

5. sticky – липке позиціонування

Значення position: sticky; є гібридом між relative і fixed. Спочатку елемент поводиться як position: relative; у звичайному потоці. Однак, коли користувач прокручує сторінку і досягає певного порогу (визначеного за допомогою властивостей top, right, bottom або left), елемент "прилипає" до цього положення у вікні браузера, подібно до position: fixed;.

Важливо: Для того, щоб sticky позиціонування працювало, необхідно задати одну з властивостей top, right, bottom або left зі значенням, відмінним від auto. 

При використанні sticky позиціонування, так само як і з absolute та fixed, може виникнути потреба контролювати порядок накладання елементів. Для цього застосовується властивість z-index. Елементи з вищим значенням z-index відображаються поверх елементів з нижчим значенням. Крім позиціонованих елементів, z-index також працюватиме з флекс та грід елементами.

HTML

<nav class="sticky-menu">

   <a href="../">Home</a>

   <a href="#">HTML</a>

   <a href="#">CSS</a>

</nav>

<!-- -->

<table class="position-table">

   <thead>

      <tr> <th>Властивість</th> <th>Опис</th> </tr>

   </thead>

   <!-- Тіло таблиці -->

</table>

‍

CSS

.sticky-menu {

   position: sticky;

   left: 0;

   right: 0;

   top: 0;

   z-index: 3;

   min-height: 3.75rem;

   border: 2px solid blueviolet;

}

.position-table thead {

   position: sticky;

   top: 3.75rem;

   z-index: 2;

   border: 2px solid blue;

}

‍

Навігаційне меню з класом .sticky-menu спочатку буде розташовуватися у звичайному потоці документа. Однак, коли верхній край меню досягне верхнього краю вікна браузера (top: 0;), а це і є початкове положення меню, то воно зафіксується у верхній частині екрана і залишатиметься там під час прокручування сторінки. Властивості left: 0; та right: 0; забезпечують його розтягування на всю ширину вікна в зафіксованому стані. 

Заголовок таблиці (thead) з класом також має липке позиціонування (position: sticky; та top: 3.75rem;). Це означає, що коли користувач прокручуватиме таблицю, заголовок досягне відстані в 3.75rem від верхнього краю вікна браузера (3.75rem – висота хедера) і зафіксується там, залишаючись видимим, доки вся таблиця не буде прокручена за межі видимості, а потім зникне з самою таблицею за межами вікна браузера.. 

z-index: 2; гарантує, що заголовок таблиці буде “перед” вмістом таблиці (тобто ближче до користувача). В той же час, щоб заголовок таблиці був “за” меню, він має менший z-index, ніж  у меню (z-index: 3;).  Тобто якщо top/bottom відповідає за  вертикальне положення позиціонованого елемента, left/right – за горизонтальне, то z-index – за положення “ближче/далі” від очей користувача.

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

‍

🟡 Випадає з потоку? – Частково. Спочатку ні, потім (після "прилипання") поводиться як фіксований
🧭 Відносно чого позиціонується? – Найближчого батька з прокручуванням

Використання: липкі заголовки в таблицях, меню навігації (зверху, збоку) при прокручуванні сторінки.

Наостанок

Розуміння властивості position в CSS є фундаментальним для будь-якого веброзробника. Як ви побачили, кожен з п'яти основних типів позиціонування надає унікальні можливості для керування розміщенням елементів на веб-сторінці.

Вибір правильного типу позиціонування залежить від конкретного завдання.

‍

‍

Завдяки різним варіантам позиціонування ви можете створювати складні макети та взаємодії на вашій сторінці. 

Майстерне володіння CSS позиціонуванням відкриває безмежні можливості для створення сучасних та адаптивних ве

‍