.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 votre CSS stacking contexts and untangles the z-index arms race — no more z-index: 99999 !important.
Die unsichtbare Struktur sichtbar gemacht: chaque Stacking-Kontext, was ihn erzeugt et was dans ihm lebt.
Warum un Element sur un anderen rendert — la tatsächliche Mechanik, kun Trial-and-Error.
Behebe den Kontext, au lieu de la Zahl aufzublasen. Dun zukünftiges Ich sagt danke.
Analysis runs on Cloudflare Workers AI, right where votre builds live.
Votre IA, via MCP
Une lentille diagnostique pour un problème que les humains ont la réputation de deviner. Le module explique la réalité du stacking ; votre équipe applique le fix en connaissance de cause.
Comment fonctionne la validation humaine
Mettez Z-Index Exorcist
au travail.
Exorcise les démons des stacking contexts.
Connexion Cloudflare · workspace de base gratuit