.modal { position: fixed; z-index: 9999; } .navbar { position: sticky; top: 0; z-index: 100; } .tooltip { z-index: 99999; }
9999 loses to the navbar's context on Safari — the number is meaningless once a parent creates its own stacking context.
The sticky navbar creates its own stacking context — render the modal at document.body instead.
import { createPortal } from "react-dom"; createPortal(<YourModal />, document.body)
Three-tier scale — content (0–10), sticky chrome (100), overlays via portal (1000). Delete every other z-index.
Kartlägger dina CSS-stacking-kontexter och löser upp z-index-kapprustningen — aldrig mer z-index: 99999 !important.
Den osynliga strukturen synliggjord: varje stacking-kontext, vad som skapar den och vad som lever i den.
Varför ett element renderas ovanför ett annat — de faktiska mekanismerna, inte trial-and-error.
Fixa kontexten istället för att blåsa upp talet. Ditt framtida jag säger tack.
Analysen körs på Cloudflare Workers AI, precis där dina byggen lever.
A sua IA, via MCP
Uma lente de diagnóstico para um problema que os humanos têm fama de adivinhar. O módulo explica a realidade do stacking; a sua equipa aplica a correção com conhecimento.
Como funciona a validação humana
Ponha Z-Index Exorcist
a trabalhar.
Exorciza os demónios dos stacking contexts.
Início de sessão com Cloudflare · workspace principal gratuito