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

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

⚡ Кратко

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

Мини-справочник слоя

СвойствоЗачем нужноВажно помнить
z-indexУправляет порядком наложения позиционированных элементов.auto не создаёт тот же эффект, что число.
positionВключает позиционирование и создаёт основу для offsets.Чаще всего z-index нужен вместе с relative, absolute, fixed, sticky.
opacityПрозрачность элемента.opacity: 0.99 уже может создать stacking context.
transformСдвиг, масштаб, поворот.Даже transform: translateZ(0) влияет на слои.
isolation: isolateСоздаёт предсказуемую границу наложения.Полезно для компонентов с внутренними слоями.
Правило: не начинайте с огромных чисел. Начинайте с карты слоёв: base, dropdown, sticky, modal, toast.

Карта слоёв наглядно

Рекомендуемая шкала z-index для типичных компонентов интерфейса:

base · z: 0
sticky · z: 10
dropdown · z: 20
overlay · z: 40
modal · z: 50
toast · z: 60
📄 lesson-19/layers.css
:root {
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
}

Навигация