Позиціонування в CSS

1

Властивість `position`

За замовчуванням усі елементи розміщуються один за одним — зверху вниз, зліва направо. Але іноді потрібно «вирвати» елемент із цього потоку і розмістити його точно там, де потрібно. Саме для цього існує властивість position.

Значення	Що робить	Чи виходить з потоку?
static	Стандартне значення. Елемент стоїть там, де природньо.	❌ Ні
relative	Зміщується відносно свого нормального місця.	❌ Ні (місце зберігається)
absolute	Прив'язується до найближчого батька з `position` ≠ static.	✅ Так
fixed	Прив'язується до вікна браузера. Не рухається при скролі.	✅ Так
sticky	Поводиться як relative, але «прилипає» при скролі.	Частково

Інтерактивна демонстрація — position

Вибери position:

Батьківський div (position: relative)

📦 Елемент

Елемент стоїть у нормальному потоці

position: static;

CSS

.box {
  position: relative;  /* зміщуємо відносно свого місця */
  top: 20px;
  left: 30px;
}

.overlay {
  position: absolute; /* прив'язуємо до батька */
  top: 0;
  right: 0;
}

.navbar {
  position: fixed;   /* завжди зверху екрану */
  top: 0;
  width: 100%;
}

Питання 1

Яке значення position використовують, щоб елемент завжди залишався у верхньому правому куті екрану, навіть при скролі?

Відповідь: position: fixed

fixed прив'язує елемент до вікна браузера (viewport), а не до батьківського елемента. Тому він не рухається при прокручуванні. Саме так реалізовують шапки сайтів, кнопки "нагору" та чати підтримки.

Питання 2

Є два елементи: А і Б. Елемент А має position: relative. Елемент Б всередині А має position: absolute; top: 0; left: 0. Де розміститься елемент Б?

У верхньому лівому куті елемента А.

absolute шукає найближчого батька, у якого position відрізняється від static. Знайшов А (relative) — прив'язався до нього. Якби А мав position: static, то Б прив'язався б до наступного батька вгору, аж до <body>.

2

Властивості `top / right / bottom / left`

Ці чотири властивості задають відстань від відповідного краю батьківського контейнера (або viewport для fixed). Вони не працюють якщо position: static.

💡 Важливо top: 20px означає "відступ 20px від верхнього краю батька", а не "зміщення вниз". Для relative — відступ від власного нормального місця.

Зміни координати — дивись що відбувається

top: left:

батько (position: relative)

📦

position: absolute; top: 10px; left: 10px;

⚠️ Типова помилка Якщо батько має position: static (за замовчуванням), то absolute дочірнього елемента прив'яжеться до <body>. Рішення — додати батьку position: relative.

Питання 3

Що станеться, якщо задати елементу position: static; top: 50px?

Нічого не станеться.

Властивості top, left, right, bottom ігноруються браузером, якщо position: static. Для того щоб вони запрацювали, потрібно змінити position на relative, absolute, fixed або sticky.

3

Властивість `z-index`

Коли елементи перекриваються, z-index визначає хто буде зверху. Уяви стопку паперів — той, у кого більший z-index, лежить вище.

Значення може бути будь-яким цілим числом (навіть від'ємним). Але z-index не працює без position (крім static).

Демо — клікни на блоки, щоб змінити z-index

z: 1

z: 2

z: 3

Клікни будь-який блок — він отримає найбільший z-index і вийде на перший план

CSS

.modal-overlay {
  position: fixed;
  z-index: 1000; /* над усім іншим */
}

.tooltip {
  position: absolute;
  z-index: 500;
}

.background-shape {
  position: absolute;
  z-index: -1; /* позаду тексту */
}

Питання 4

Елемент A має z-index: 100, елемент B — z-index: 5. Обидва position: absolute. Який елемент буде зверху?

Елемент A (z-index: 100).

Більший z-index = вищий шар. Зверни увагу: z-index порівнюється лише між елементами в одному stacking context. Якщо батьки мають різні z-index, порівнюються вже вони.

4

Властивість `overflow`

Що робити, якщо вміст не вміщується в контейнер? Властивість overflow задає поведінку в такому випадку. Також є окремі overflow-x та overflow-y для горизонтального і вертикального напрямків.

Значення	Що відбувається з контентом, що не влізає
visible	Виходить за межі контейнера (за замовчуванням)
hidden	Обрізається, не відображається
scroll	Завжди показує полосу прокрутки
auto	Показує полосу прокрутки тільки якщо потрібно

Демо — overflow варіанти

visible

Цей текст виходить за межі блоку і перекриває сусідні елементи. Дуже довгий текст без обмежень.

hidden

Цей текст обрізається на межі блоку. Дуже довгий текст без обмежень.

scroll

Завжди є скролбар. Цей текст можна прокрутити всередині блоку. Ще текст.

auto

Скролбар тільки за потребою. Цей текст можна прокрутити. Ще більше тексту тут.

CSS

.card {
  height: 200px;
  overflow: hidden;     /* текст обрізається */
}

.code-window {
  overflow-x: auto;   /* горизонтальний скрол */
  overflow-y: hidden;  /* вертикальний обрізати */
}

.scroll-list {
  max-height: 300px;
  overflow-y: auto;   /* скрол якщо не влізе */
}

Питання 5

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

Відповідь:

overflow-y: auto (або scroll) — вертикальний скрол
overflow-x: hidden — горизонтальне обрізання

Або коротко: overflow: auto — але тоді скрол може з'явитися в обох напрямках.

5

`visibility` vs `display: none`

Обидві властивості "ховають" елемент, але по-різному. Це найпоширеніша плутанина у початківців:

Властивість	Видимий?	Займає місце?	Коли використовувати
display: none	❌	❌ Ні	Повністю прибрати елемент
visibility: hidden	❌	✅ Так	Сховати але зберегти розмітку
opacity: 0	❌ (прозорий)	✅ Так	Анімація появи/зникнення

Демо — порівняй поведінку

display: none

📦 Блок A

📦 Блок B

Блок B "підтягується" коли A зникає

visibility: hidden

📦 Блок A

📦 Блок B

Блок B залишається на місці

Питання 6

Ти робиш анімацію: кнопка зникає, а сусідні елементи НЕ повинні зміщуватися. Що використати: display: none чи visibility: hidden?

visibility: hidden

Оскільки visibility: hidden зберігає місце елемента в розмітці, сусідні елементи не зміщуються. Крім того, для плавних анімацій зручно поєднувати з opacity: 0 та transition.

6

Практичний кейс: `position: sticky`

sticky — це гібрид relative і fixed. Елемент поводиться як relative до досягнення порогу (threshold), після чого "прилипає" до краю контейнера.

Демо — прокрути вміст, заголовок "прилипне"

Рядок контенту 1
Рядок контенту 2
Рядок контенту 3
Рядок контенту 4
Рядок контенту 5
Рядок контенту 6
Рядок контенту 7
Рядок контенту 8
Рядок контенту 9
Рядок контенту 10

⚠️ Sticky не працює якщо... Батько має overflow: hidden або overflow: auto — тоді sticky перестає "прилипати". Також потрібно обов'язково вказати top, bottom, left або right.

Питання 7

Ти хочеш зробити "липку" шапку таблиці, яка залишається видимою при прокручуванні таблиці. Але після додавання position: sticky; top: 0 нічого не змінилося. Яка найімовірніша причина?

Найімовірніша причина: батьківський елемент має overflow: hidden або overflow: auto.

Для sticky важливо, щоб елемент прокручувався в межах скролящого контейнера. Якщо батько "ховає" переповнення, sticky не матиме простору для "прилипання". Перевір усіх батьків аж до <body>.

✓

Що ми вивчили

Концепція	Ключове правило
position	Визначає систему координат елемента
top/left/right/bottom	Працюють тільки якщо position ≠ static
z-index	Хто вищий шар — той поверх. Потребує position.
overflow	Що робити якщо контент не влізає
visibility vs display	hidden зберігає місце, none — ні

Властивість position

Властивості top / right / bottom / left

Властивість z-index

Властивість overflow

visibility vs display: none