Урок 19. Старый vs Новый: z-index и контекст наложения (stacking context)

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя
#z-index #position #opacity #transform #isolation

⚡ Кратко

z-index управляет слоями только внутри правил наложения. Главное — понять stacking context: локальный мир слоёв, где большое число не может перепрыгнуть наружу.

Старый подход: магические числа

Проблема: каждый новый компонент получает число «с запасом», больше предыдущего. Через полгода в проекте десятки 9999 и 999999, и никто не знает, что выше чего.

📄 lesson-19/old.css
.dropdown { z-index: 9999; }
.modal    { z-index: 99999; }
.tooltip  { z-index: 999999; }
dropdown 9999
modal 99999
tooltip 999999
/* числа «на глаз», без системы */

Новый подход: шкала слоёв в переменных

Лучше завести понятную шкалу с небольшими числами и хранить её в CSS-переменных. Порядок читается сразу, а конфликтов нет.

📄 lesson-19/new.css
:root {
  --layer-sticky: 10;
  --layer-dropdown: 20;
  --layer-overlay: 40;
  --layer-modal: 50;
}

.modal {
  position: fixed;
  z-index: var(--layer-modal);
}
sticky 10
dropdown 20
modal 50
.dropdown { z-index: var(--layer-dropdown); }
.modal    { z-index: var(--layer-modal); }
Та же визуальная иерархия достигается числами 10/20/50 вместо 9999/99999/999999 — но шкалу легко читать и расширять.

Навигация