Урок 19. Ошибки: z-index и контекст наложения (stacking context)

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

⚡ Кратко

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

Типичные ошибки

Ошибка 1: ставить z-index элементу без position. На статичном элементе z-index просто игнорируется — нужен relative/absolute/fixed/sticky.
Ошибка 2: наращивать число (9999 → 99999), не понимая stacking context. Если родитель в своём контексте — большое число не поможет.
Ошибка 3: добавлять transform или opacity<1 родителю ради анимации и случайно «запирать» детей в новом контексте наложения.
Ошибка 4: чинить z-index'ом структуру HTML. Часто правильнее переставить элемент или вынести modal ближе к <body>.

Главная ловушка: дефект → как правильно

Слева — как ломается, справа — как чинится. У «родителя» стоит transform, поэтому бейдж с z-index: 9999 не может перепрыгнуть синюю панель (z-index: 5).

❌ Как ломается

родитель (transform) z: 9999
сосед z: 5 — сверху
📄 lesson-19/broken.css
.parent { transform: translateZ(0); } /* новый контекст */
.parent .badge { z-index: 9999; }      /* заперт внутри */
.sibling { z-index: 5; }               /* всё равно выше */

✅ Как правильно

Убираем лишний transform у родителя (или выносим бейдж выше по дереву). Теперь бейдж и панель — в одном контексте, и 9999 действительно поднимает бейдж наверх.

родитель (без transform) z: 9999
сосед z: 5
📄 lesson-19/fixed.css
.parent { /* transform убран — нет лишнего контекста */ }
.parent .badge { z-index: 9999; } /* теперь реально сверху */
.sibling { z-index: 5; }

Диагностика

  1. Откройте DevTools и выберите проблемный элемент.
  2. Поднимайтесь по родителям в дереве элементов.
  3. Ищите у предков position с z-index, opacity меньше 1, transform, filter, isolation — любой из них создаёт контекст.
  4. На вкладке Layers в Chrome видно фактический порядок слоёв.

Навигация