z-index, о котором часто забываютЕсли у вас не работает
z-index — причина может быть не в его значении, а в контексте наложения (stacking context).❗️Вот что его создаёт (неочевидное):
*
position: fixed | absolute | relative + z-index ≠ auto*
transform, filter, perspective, opacity < 1*
will-change, mix-blend-mode, contain: layout и другие📦 Пример:
.parent {
transform: translateZ(0); /* создаёт stacking context */
z-index: 10;
}
.child {
position: absolute;
z-index: 999; /* но не выйдет за пределы .parent */
}
🧠 Вывод:
z-index работает только внутри текущего контекста наложения. Чтобы перекрыть что-то выше — нужно изменить контекст.📚 Подробнее: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_positioned_layout/Stacking_context
📲 Мы в MAX
👉 @frontend_1
