.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.
Maps din CSS stacking contexts and untangles the z-index arms race — no more z-index: 99999 !important.
Den osynliga strukturen synliggjord: hver stacking-kontext, hvad som skalpar den og hvad som lever i den.
Varfor ett element renderas ovanfor ett annat — de faktiskal mekanismerna, ikke trial-and-error.
Fixa kontexten istället for at blåsa upp talet. Ditt framtida jag säger tack.
Analysis runs on Cloudflare Workers AI, right where din builds live.
Din AI, via MCP
En diagnostisk linse for et problem, mennesker er kendt for at gætte sig igennem. Modulet forklarer stacking-virkeligheden; dit team laver fixet med viden.
Sådan virker human-gate
Sæt Z-Index Exorcist
i arbejde.
Uddriver stacking-context-dæmoner.
Cloudflare-login · kerne-workspace gratis