.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.
La tua AI, via MCP
Una lente diagnostica per un problema che gli umani sono famosi per indovinare. Il modulo spiega la realtà dello stacking; il team applica la correzione consapevolmente.
Come funziona il gate umano
Metti Z-Index Exorcist
al lavoro.
Esorcizza i demoni degli stacking context.
Accesso con Cloudflare · workspace di base gratuito