.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.
Jouw AI, via MCP
Een diagnostische lens voor een probleem waar mensen berucht op gokken. De module legt de stacking-werkelijkheid uit; je team past de fix bewust toe.
Hoe de human gate werkt
Zet Z-Index Exorcist
aan het werk.
Verdrijft stacking-context-demonen.
Cloudflare-login · kern-workspace gratis