23.02.2026 09:00
Почему z-index: 9999 не работает (и как перестать страдать) Знакомая ситуация? У вас есть модалка, которая почему-то пе
Почему z-index: 9999 не работает (и как перестать страдать)
Знакомая ситуация? У вас есть модалка, которая почему-то перекрывается хедером. Вы ставите ей z-index: 100. Не помогает. Ставите 1000. Тишина. В ярости пишете 999999... и всё равно хедер сверху.
Добро пожаловать в ад Контекстов наложения (Stacking Contexts).
Главная ошибка джунов (и не только) — думать, что z-index - это глобальная очередь, где у кого цифра больше, тот и король.
☝️ Суровая реальность:
z-index работает только внутри своего контекста наложения.
Представьте, что ваша верстка - это стопка книг.
1. Хедер - это книга. У неё z-index: 2.
2. Сайдбар - это книга. У неё z-index: 1.
Внутри Сайдбара лежит ваша модалка. Вы даете ей z-index: 9999. Но модалка - это страница внутри книги "Сайдбар".
Неважно, какой номер страницы вы ей дадите. Если вся книга "Сайдбар" лежит ПОД книгой "Хедер" (1 < 2), то и ваша модалка навсегда останется под хедером.
🛠 Кто создает новый контекст наложения?
Это не только z-index + position. Контекст создают свойства, на которые вы могли даже не подумать:
• opacity меньше 1
• transform (любой, кроме none)
• filter
• will-change
• isolation: isolate
Пример из жизни:
Вы добавили красивую анимацию появления на родительский блок (opacity: 0.99), и вдруг все тултипы внутри него провалились под соседние блоки. Потому что opacity создала новый контекст, и дочерние элементы оказались заперты в нем.
💡 Как лечить?
1. Не участвуйте в "Войне Девяток". Если вы пишете z-index: 1000, скорее всего, у вас архитектурная проблема. Обычно хватает 1, 2, 3.
2. Проверяйте родителей. Если элемент не всплывает, идите вверх по DOM-дереву и ищите того, кто создал новый контекст (обычно это transform или overflow: hidden).
3. Используйте Порталы (React Portals / Vue Teleport). Модалки, тултипы и дропдауны должны жить в корне body, а не глубоко в верстке. Это единственный надежный способ вырваться из контекста родителя.
4. isolation: isolate - супер-свойство. Оно принудительно создает новый контекст наложения. Полезно, когда нужно "запереть" z-index детей внутри блока, чтобы они не конфликтовали с остальной страницей.
#css #layout #frontend #tricks
👉 @frontend_1
Знакомая ситуация? У вас есть модалка, которая почему-то перекрывается хедером. Вы ставите ей z-index: 100. Не помогает. Ставите 1000. Тишина. В ярости пишете 999999... и всё равно хедер сверху.
Добро пожаловать в ад Контекстов наложения (Stacking Contexts).
Главная ошибка джунов (и не только) — думать, что z-index - это глобальная очередь, где у кого цифра больше, тот и король.
☝️ Суровая реальность:
z-index работает только внутри своего контекста наложения.
Представьте, что ваша верстка - это стопка книг.
1. Хедер - это книга. У неё z-index: 2.
2. Сайдбар - это книга. У неё z-index: 1.
Внутри Сайдбара лежит ваша модалка. Вы даете ей z-index: 9999. Но модалка - это страница внутри книги "Сайдбар".
Неважно, какой номер страницы вы ей дадите. Если вся книга "Сайдбар" лежит ПОД книгой "Хедер" (1 < 2), то и ваша модалка навсегда останется под хедером.
🛠 Кто создает новый контекст наложения?
Это не только z-index + position. Контекст создают свойства, на которые вы могли даже не подумать:
• opacity меньше 1
• transform (любой, кроме none)
• filter
• will-change
• isolation: isolate
Пример из жизни:
Вы добавили красивую анимацию появления на родительский блок (opacity: 0.99), и вдруг все тултипы внутри него провалились под соседние блоки. Потому что opacity создала новый контекст, и дочерние элементы оказались заперты в нем.
💡 Как лечить?
1. Не участвуйте в "Войне Девяток". Если вы пишете z-index: 1000, скорее всего, у вас архитектурная проблема. Обычно хватает 1, 2, 3.
2. Проверяйте родителей. Если элемент не всплывает, идите вверх по DOM-дереву и ищите того, кто создал новый контекст (обычно это transform или overflow: hidden).
3. Используйте Порталы (React Portals / Vue Teleport). Модалки, тултипы и дропдауны должны жить в корне body, а не глубоко в верстке. Это единственный надежный способ вырваться из контекста родителя.
4. isolation: isolate - супер-свойство. Оно принудительно создает новый контекст наложения. Полезно, когда нужно "запереть" z-index детей внутри блока, чтобы они не конфликтовали с остальной страницей.
#css #layout #frontend #tricks
👉 @frontend_1