Ось урок, згенерований за твоїм майстер-промптом.

🎓 CS50 Style: Overflow, z-index та Stacking Context

Привіт, друзі! Це CS50... вірніше, це ваша подорож у світ CSS, де речі іноді зникають, а іноді налізають одна на одну без дозволу.

Мене звати [Твоє Ім'я], і сьогодні ми розберемося з трьома вершниками CSS-апокаліпсису, які змушують новачків плакати: Overflow, z-index та таємничий Stacking Context.

1. 🔥 Вступ: Коли контент "виходить з берегів"

Уявіть, що ви збираєтеся у відпустку. У вас є валіза (це ваш div з фіксованими розмірами). І у вас є купа речей (це ваш контент). Що станеться, якщо речей більше, ніж місця у валізі?

У реальному житті ви або сядете на валізу, щоб її закрити, або речі стирчатимуть назовні. У вебі відбувається те саме.

Риторичне запитання: Ви коли-небудь бачили сайт, де текст вилазить за межі кнопки? Або спливаюче вікно (popup), яке чомусь ховається під текстом статті, хоча мало б бути над усім?

Без розуміння сьогоднішньої теми ви будете схожі на будівельника, який намагається покласти дах під фундамент. Ми навчимося контролювати простір (що робити з зайвим) і глибину (хто зверху).

2. 🧠 Теоретична база: Що відбувається "під капотом"

Давайте розкладемо це на атоми, але без нудних термінів.

А. Overflow (Переповнення)

Це правило, яке відповідає на питання: "Що робити, якщо вміст не влазить у коробку?"

visible (за замовчуванням): Браузер каже: "Мені байдуже на кордони", і текст просто стирчить назовні. Це "речі, що звисають з валізи".
hidden: Браузер бере ножиці і відрізає все, що стирчить. Жорстоко, але чисто.
scroll: Браузер додає смуги прокрутки завжди (навіть якщо вони не треба).
auto: Розумний варіант. Смуги прокрутки з'являються тільки тоді, коли вони справді потрібні.

Б. Z-index (Вісь Z)

Екран плоский (2D), але ми сприймаємо його як шари (3D). z-index — це номер поверху. * z-index: 1 — перший поверх. * z-index: 100 — хмарочос.

⚠️ Важливо запам’ятати: z-index працює ТІЛЬКИ якщо у елемента встановлено position (relative, absolute, fixed або sticky). Якщо position: static (за замовчуванням) — z-index ігнорується.

В. Stacking Context (Контекст накладання) — 🧨 Найскладніше

Ось де більшість ламає зуби. Уявіть собі офіс.

У Менеджера (z-index: 10) на столі лежить Важливий документ (z-index: 9999).
Поруч сидить Директор (z-index: 20).

Питання: Чи буде Важливий документ Менеджера вище за Директора? Відповідь: НІ.

Чому? Тому що документ знаходиться всередині світу Менеджера. А Менеджер (рівень 10) нижчий за Директора (рівень 20). Те, що відбувається всередині папки Менеджера, не може перекрити Директора.

Це і є Stacking Context. Це локальна "пісочниця". Якщо батьківський елемент має низький пріоритет, ніякі z-index: 9999999 у його дітей не допоможуть їм перекрити сусідній елемент з вищим пріоритетом.

3. 🧪 Приклади: Від простого до болючого

Приклад 1: Overflow (Класика)

Припустимо, у нас є картка товару з фіксованою висотою, але опис товару занадто довгий.

.card {
  width: 200px;
  height: 100px;
  border: 2px solid red;
  /* Що тут буде за замовчуванням? overflow: visible */
}

Результат: Текст вивалиться на сусідні елементи. Це виглядає зламаним. Рішення: Додаємо overflow: auto;. Тепер всередині картки з'явиться маленький скрол.

Приклад 2: Z-index (Битва кольорів)

Два квадрати, накладені один на одного через position: absolute.

<div class="box red" style="z-index: 10"></div>
<div class="box blue" style="z-index: 5"></div>

Питання до вас: Який колір ми побачимо зверху? Відповідь: Червоний, бо 10 > 5. Це просто.

Приклад 3: Пастка Stacking Context (Реальний кейс)

Ви робите модальне вікно (popup).

<!-- Батько 1 (Меню) -->
<nav style="position: relative; z-index: 10;">
  Меню
  <!-- Дитина (Випадаючий список) -->
  <div class="dropdown" style="position: absolute; z-index: 1000;">
    Опції
  </div>
</nav>

<!-- Батько 2 (Банер) -->
<header style="position: relative; z-index: 20;">
  Я великий банер!
</header>

Очікування: Випадаючий список (z-index: 1000) має перекрити банер (z-index: 20). Реальність: Банер перекриває випадаючий список. 😱

Чому? Тому що nav (батько списку) має z-index: 10. А header має z-index: 20. Битва відбувається між батьками: 10 проти 20. Батько з 20 перемагає, і він "давить" своїм авторитетом все, що знаходиться всередині батька з 10, навіть якщо там z-index: 1000.

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

А тепер ваша черга. Відкрийте редактор коду (або Codepen) і спробуйте це.

🔹 Завдання 1: "Scroll Me" Створіть div 100x100px. Напишіть туди багато тексту "Lorem Ipsum". Зробіть так, щоб текст не вилазив, а з'являлася прокрутка.

🔹 Завдання 2: "Липка шапка" Створіть хедер (position: fixed; top: 0), який має бути завжди зверху. Додайте на сторінку картинки. Проскрольте сторінку. Якщо картинки перекривають хедер — виправте це за допомогою z-index.

🔹 Завдання 3: "Виправ баг" Відтворіть "Приклад 3" з теорії (де банер перекриває меню). Задача: Зробіть так, щоб меню було зверху, НЕ змінюючи HTML структуру. Тільки CSS. (Підказка: змініть z-index батьків).

🔹 Завдання 4: Міні-кейс "Фотогалерея" Розмістіть 3 картинки так, щоб вони частково перекривали одна одну віялом (як карти в руці). Перша — найнижче, третя — найвище.

🔹 Питання "А що, якщо...": Що станеться, якщо задати z-index: -1? Спробуйте розмістити текст поверх картинки, не використовуючи background-image, а просто посунувши картинку під текст за допомогою від’ємного індексу.

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

Як досвідчений розробник дивиться на ці проблеми?

Синдром z-index: 999999: Новачки часто панікують і ставлять z-index: 9999, потім 99999, потім 999999. Це "війна індексів". Профі думає інакше: "Якщо мій елемент не спливає нагору, ймовірно, його тримає батьківський контекст (Stacking Context). Треба перевірити батька, а не збільшувати число".
Структура DOM: Іноді, щоб вирішити проблему з накладанням, найпростіше винести модальне вікно в самий низ HTML (перед </body>), щоб у нього не було конкурентів-батьків. Це часто роблять бібліотеки на кшталт React Portals.
Переповнення по горизонталі: Ненависний горизонтальний скрол на мобільних телефонах часто виникає через один елемент, який має фіксовану ширину. Завжди використовуйте overflow-x: hidden для body з обережністю, краще знайдіть винуватця.

6. 🧩 Підсумок

Отже, що ми сьогодні забрали в свій арсенал: 1. Overflow — це менеджер простору. Ви вирішуєте: обрізати, показати чи скролити. 2. Z-index — працює тільки з position (не static). 3. Stacking Context — ієрархія важливіша за великі числа. Дитина генерала важливіша за генерала армії рядових.

Тепер ви можете верстати складні інтерфейси, меню, попапи і не боятись, що щось кудись зникне.

Далі буде: Ми навчилися керувати окремими блоками. Але як вибудувати з них цілу сітку сайту? На наступному уроці ми познайомимося з Flexbox — магією, яка змінила веб назавжди.

А поки що — щасливого кодингу! 👨‍💻👩‍💻