Why z-index Doesn’t Work (And How to Fix It)
=> Why z-index Is Not Working? You write this: .modal { position: absolute; z-index: 9999; } But still… 👉 It appears behind other elements. => The Real Problem z-index only works within the ...
Source: DEV Community
=> Why z-index Is Not Working? You write this: .modal { position: absolute; z-index: 9999; } But still… 👉 It appears behind other elements. => The Real Problem z-index only works within the same stacking context. If elements are in different contexts → values don’t compare. => What Creates a Stacking Context Many developers don’t know this. These properties create new stacking contexts: position: relative; z-index: value; opacity: < 1; transform: translateZ(0); filter: blur(0); => Common Bug Example .parent { position: relative; z-index: 1; } .child { position: absolute; z-index: 9999; } If another element is outside this parent: 👉 It can still appear above .child => Why This Happens Because .child is trapped inside .parent stacking context. It cannot escape. => The Fix Move element outside or remove stacking context: .parent { position: static; } Or: 👉 Move modal directly under <body> => Real UI Tip For modals, dropdowns, overlays: 👉 Avoid deep nestin
