TGViewer
Веб-страница Веб-страница @tproger_web · 22.5K subscribers
Post #6511 1.69K
Почему большой z-index не поднимает подсказку над шапкой

У подсказки может быть z-index: 999999, а у шапки всего 2, но шапка всё равно окажется сверху. Значения сравниваются не по всей странице, а только внутри одного контекста наложения. Если main создал отдельный контекст с z-index: 1, его дочерняя подсказка не сможет обойти соседний header с z-index: 2.

Контекст появляется не только из-за сочетания position и z-index. Его могут создать opacity меньше единицы, transform, will-change, фиксированное или липкое позиционирование и другие свойства. Поэтому увеличение числа порой напоминает торг с браузером: ставка растёт, результата нет.

В разборе Josh W. Comeau есть интерактивные примеры и схемы контекстов. При отладке пройдите по предкам проблемного элемента: найдите предка, который создал новый контекст, и проверьте его порядок среди соседних контекстов.
  • 🔥 7
More from @tproger_web
  1. Sep 20, 2026Как проверять CSS после рефакторинга с ИИ Пять ИИ-инструментов получили HTML и CSS карточк…
  2. Sep 20, 2026Как защитить списание кредитов в Django от гонки запросов У аккаунта один кредит. Два запр…
  3. Sep 20, 2026Как анимировать перестройку CSS Grid без JavaScript В разборе приёма содержимое каждой пли…
  4. Sep 19, 2026Как защитить API от повторной оплаты Клиент не получил ответ и повторил POST. Сервер мог у…
  5. Sep 19, 2026Как заблокировать отрисовку JavaScript, не останавливая HTML-парсер Когда компоненту нужно…
  6. Sep 19, 2026Почему box-shadow не заменяет outline для фокуса CSS-тень даёт больше свободы в оформлении…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →