Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
Наука · 9 августа 2026 г.
🧩 Трюк с z-index, о котором часто забывают
🧩 Трюк с 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 👉 @frontend_1