Властивість позиціонування CSS

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

Значення пропси Position

static

Значення за замовчуванням.
Елемент розміщується в документі відповідно до нормального потоку.
Не реагує на пропси top, right, bottom, left, z-index.

Приклад статичного позиціонування:

css

.element {
  position: static;
}

relative

Елемент залишається в потоці, але може бути зсунутий за допомогою top, right, bottom, left. Простір, зайнятий елементом, залишається на місці.

Приклад відносного позиціонування:

css

.element {
  position: relative;
  top: 10px; /* Зсуває елемент вниз */
}

Елемент видаляється з потоку і позиціонується відносно найближчого предка з position: relative, absolute, fixed або sticky. Якщо такого предка немає, він позиціонується відносно body. Можна використовувати пропси top, right, bottom, left.

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

css

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  left: 0; /* Позиціоновано відносно контейнера */
}

fixed

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

Приклад фіксованого позиціонування:

css

.element {
  position: fixed;
  top: 0;
  left: 0;
}

sticky

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

css

.element {
  position: sticky;
  top: 10px; /* Фіксується, як тільки досягає 10px від верхньої частини екрану */
}

Увага:

Коли використовуєте sticky, переконайтеся, що батьківський контейнер має висоту. Інакше позиціонування не буде працювати.

Таблиця порівняння

Властивість	Потік документа	Позиціоновано відносно
`static`	У потоці	Не позиціоновано
`relative`	У потоці	Самого себе
`absolute`	Поза потоком	Найближчий позиціонований предок або `body`
`fixed`	Поза потоком	Вікно браузера
`sticky`	У потоці до фіксації	Найближчий прокручуваний контейнер або межі вікна перегляду

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Властивість позиціонування CSS

#Значення пропси Position

#static

#relative

#absolute

#fixed

#sticky

#Таблиця порівняння