.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.
Twoje AI, przez MCP
Diagnostyczna soczewka na problem, przy którym ludzie słyną z zgadywania. Moduł wyjaśnia rzeczywistość nakładania; zespół stosuje poprawkę świadomie.
Jak działa brama człowieka
Włącz Z-Index Exorcist
do pracy.
Wypędza demony kontekstów nakładania.
Logowanie Cloudflare · rdzeń Workspace za darmo