Модуль 11

Position: static, relative, absolute, fixed, sticky

Ось твій урок у стилі CS50 та David Malan. Високий темп, жива мова, фокус на розумінні суті, а не зубрінні.

🎓 CS50: CSS Positioning. Магія розташування

Привіт, друзі! Це CS50, і сьогодні ми зламаємо фізику веб-сторінки.

1. 🔥 Вступ: Коли стандартних правил замало

Уявіть, що ви пишете статтю у Word. Ви пишете речення, воно закінчується, починається нове. Абзац за абзацом, зверху вниз. Це логічно, правда? Це називається "Нормальний потік документа" (Normal Flow).

Але подивіться на сучасний веб-сайт. * Чому кнопка "Чат з підтримкою" завжди висить у правому нижньому кутку, навіть коли ви скролите сторінку? * Як зробити бейдж "ЗНИЖКА" поверх фотографії товару? * Чому навігаційне меню прилипає до верху екрана, коли ви читаєте статтю?

Риторичне питання: Якби ми користувалися лише стандартними правилами "зверху-вниз", чи змогли б ми це зробити? Ні.

Уявіть собі кімнату, повну коробок (це ваші <div>). * У звичайному житті ви ставите коробки одна на одну. * Але CSS Positioning дозволяє вам взяти одну коробку і прибити її цвяхом до стелі, або змусити її левітувати над іншими, або приклеїти до скла вашого монітора.

Сьогодні ми розберемося, як керувати гравітацією на вашому сайті. Поїхали!

2. 🧠 Теоретична база (Що там "під капотом"?)

У CSS є властивість position. Вона має 5 основних значень. Давайте розберемо їх не як терміни з підручника, а як поведінкові моделі.

1. static (Статичний — "За замовчуванням")

Це те, що ви маєте, якщо нічого не чіпаєте. * Логіка: Елемент пливе за течією. Один за одним. * Важливо: Властивості top, bottom, left, right та z-index на нього НЕ діють. * Аналогія: Цегла у стіні. Вона стоїть там, де її поклали.

2. relative (Відносний — "Привид")

Ось тут починається магія. * Логіка: Елемент залишається у потоці (інші елементи "думають", що він досі на своєму місці), АЛЕ ви можете зсунути його візуально. * Як це працює: Якщо ви зсунете його на 20px вправо, на його старому місці залишиться порожнеча. * Аналогія: Ви встали зі стільця і зробили крок вбік. Ваше місце все ще зайняте (ніхто не може туди сісти), але фізично ви знаходитесь трохи збоку.

3. absolute (Абсолютний — "Самотній вовк")

Це найпотужніший і найнебезпечніший інструмент новачка. * Логіка: Елемент виривається з нормального потоку. Інші елементи ігнорують його і займають його місце, наче його ніколи й не було. * Головне правило (Запам'ятайте це!): Він позиціонується відносно найближчого батьківського елемента, у якого position НЕ static. Якщо такого немає — він летить аж до самого вікна браузера (<body>). * Аналогія: Наклейка на коробці. Куди рухається коробка (батько), туди й наклейка.

4. fixed (Фіксований — "Наліпка на моніторі")

  • Логіка: Елемент виривається з потоку, як і absolute, але він позиціонується відносно вікна браузера (viewport).
  • Ефект: Ви скролите сторінку, а елемент стоїть на місці.
  • Аналогія: Бруд на вашому окулярі. Ви крутите головою, дивитесь на різні речі, але ця пляма завжди перед очима в одному й тому ж місці.

5. sticky (Липкий — "Гібрид")

Найсучасніший варіант. * Логіка: Він поводиться як relative, поки ви скролите, але як тільки він доходить до певної точки екрана — стає fixed. * Аналогія: Ви котите візок у супермаркеті. Поки ви йдете, він їде. Але як тільки він впирається в касу, він зупиняється.

3. 🧪 Приклади (Lab time!)

Приклад 1: Relative vs Static

Уявіть код:

.box { position: relative; top: 20px; left: 20px; }

Питання до вас: Що станеться з текстом, який йде ОДРАЗУ після цього блоку? Він посунеться вниз? Відповідь: Ні! Текст підлізе під (або над) наш блок. Тому що старе місце блоку "заброньоване". Це часто плутає новачків.

Приклад 2: Класика жанру — Absolute всередині Relative

Це "Святий Грааль" верстки карток товарів. Нам треба розмістити іконку "Хіт продажів" у кутку картки.

<!-- Батько -->
<div class="card" style="position: relative;">
  <img src="sneakers.jpg">
  <!-- Дитина -->
  <span class="badge" style="position: absolute; top: 10px; right: 10px;">
    SALE
  </span>
</div>

Чому це працює? 1. Ми сказали .card: "Ти — точка відліку" (position: relative). 2. Ми сказали .badge: "Стань у правий верхній кут відносно своєї картки" (absolute). 3. Якби ми забули position: relative у картки, де опинився б бейдж? Правильно, у правому верхньому кутку всієї сторінки!

4. 🛠 Практична частина

Час кодити! Відкрийте редактор (CodePen, VS Code) і виконайте ці завдання.

Завдання 1: "Привид" Створіть три квадрати (div) різного кольору, що йдуть один за одним. * Середньому квадрату дайте position: relative, top: 50px, left: 50px. * Переконайтеся, що третій квадрат не зрушив з місця, а простір між 1-м і 3-м залишився порожнім.

Завдання 2: "Аватарка з індикатором" Зробіть коло (аватарку). * Додайте маленьке зелене коло (індикатор "Онлайн") поверх аватарки в правому нижньому кутку. * Підказка: Батько — relative, індикатор — absolute. Використовуйте bottom і right.

Завдання 3: "Набридлива реклама" Створіть кнопку "Купи мене!", яка завжди знаходиться внизу екрана по центру, скільки б тексту на сторінці ви не написали. * Підказка: position: fixed.

Завдання 4: "Липкий заголовок" Створіть довгий список тексту. Зробіть заголовок <h2>, який при скролі "прилипає" до верху на відступі 10px. * Увага: Для роботи sticky обов'язково треба задати top (наприклад, top: 0 або top: 10px). Без цього магія не спрацює!

Завдання 5: Міні-кейс "Випадаюче меню" Подумайте, як зробити просте випадаюче меню. У вас є кнопка, а під нею — прихований список посилань. Коли список з'являється, він має бути ПОВЕРХ контенту, а не розсувати його. * Яке позиціонування потрібне списку? (Відповідь — absolute).

5. 💡 Мислення як у розробника

Ось вам кілька інсайдів, щоб ви не наступали на граблі, на яких танцювали ми всі.

  1. Синдром "Абсолютного хаосу": Новачки часто намагаються зверстати ВЕСЬ сайт на position: absolute.

    • Чому це погано: Ваш сайт перестане бути гнучким. На мобільному телефоні все поїде, елементи налізуть один на одного.
    • Як думає профі: Абсолютне позиціонування — це як спеції. Використовуйте його для дрібних деталей (іконки, бейджі, модальні вікна, тултіпи). Для основного макету використовуйте Flexbox або Grid (про них — на наступних уроках).

  2. Проблема z-index: Коли ви починаєте накладати елементи (absolute, fixed), вони можуть перекрити те, що не треба.

    • Властивість z-index керує віссю Z (ближче/далі від очей користувача).
    • Порада: Не пишіть z-index: 999999. Це поганий тон. Створіть систему (наприклад, меню = 100, модалка = 1000).

  3. Не забувайте про relative у батька! Якщо ваш absolute елемент полетів невідомо куди — 99% гарантії, що ви забули position: relative у контейнера.

6. 🧩 Підсумок

Отже, що ми маємо у своєму арсеналі?

  • Static: Просто потік. Нудно, надійно.
  • Relative: Зсув без впливу на сусідів. База для абсолютів.
  • Absolute: Повна свобода всередині батька. Для накладання шарів.
  • Fixed: Прив'язка до екрана. Для меню та чатів.
  • Sticky: Розумне прилипання при скролі.

Тепер ви можете не просто складати блоки в стовпчик, а створювати складні, інтерактивні інтерфейси, нашаровувати елементи та фіксувати навігацію.

Що далі? Ви, напевно, помітили, що розставляти великі блоки (як колонки сайту) за допомогою position — це пекло. Має ж бути спосіб простіше? Він є. На наступному уроці ми познайомимося з Flexbox — системою, яка змінила веб назавжди.

А поки що — це був CS50. Практикуйтесь!

← До списку уроків Наступний урок →