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

Вивчаємо position: fixed та розуміємо різницю між абсолютним і фіксованим позиціонуванням.

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

Фіксоване позиціонування схоже на абсолютне. Елемент також можна переміщувати за допомогою top, right, bottom і left.

Головна відмінність проявляється під час прокручування сторінки.

Елемент з position: absolute рухається разом зі сторінкою, а елемент з position: fixed залишається на одному місці відносно вікна браузера.

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

Створимо блок з абсолютним позиціонуванням та великий текст, щоб з'явилася прокрутка.

<div id="elem"></div>

<div id="content">
  some long text
</div>

#elem {
  position: absolute;

  top: 30px;
  right: 30px;

  width: 100px;
  height: 100px;

  border: 1px solid green;
}

#content {
  margin: 0 auto;

  width: 300px;

  text-align: justify;
  font: 16px Arial;
}

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

Замінимо absolute на fixed. Тепер елемент буде прив'язаний до вікна браузера.

#elem {
  position: fixed;

  top: 30px;
  right: 30px;

  width: 100px;
  height: 100px;

  border: 1px solid green;
}

Різниця між absolute та fixed

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

Де використовується fixed

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

❗ Важливо:

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

Практичні завдання

📌 Завдання:

№1. Створіть квадратний блок 100×100px.
№2. Додайте йому position: fixed.
№3. Розмістіть його у верхньому правому куті.
№4. Додайте багато тексту та перевірте поведінку під час прокрутки.

💡 Показати підказку

Для закріплення елемента на екрані використовуйте position: fixed.

✅ Показати відповідь

#elem {
  position: fixed;

  top: 30px;
  right: 30px;
}