Слои z-index
Визуальное демо
Контекст наложения (Stacking Context)
Контекст наложения формируется любым элементом, который соответствует определенным критериям (например, opacity < 1 или transform). После формирования его дочерние элементы замыкаются внутри этого контекста.
opacity: 0.9
filter: blur()
transform: scale(1)
will-change
context_demo.css
.parent {
position: relative;
z-index: 1; /* Создает контекст */
}
.child {
position: absolute;
z-index: 999; /* В ловушке! */
}Дочерний (999)
Родитель (z:1)Сосед (z:2)
Распространенные ошибки
Статичное позиционирование
Z-index игнорируется для элементов с position: static (по умолчанию). Всегда используйте relative, absolute или fixed.
Прозрачность и Трансформации
Установка opacity < 1 или использование transform создает новый контекст наложения даже без указания z-index.
Война «9999»
Избегайте неоправданно высоких значений z-index. Используйте последовательную шкалу (10, 20, 30), чтобы структура слоев оставалась понятной.