Z-index problem!

Nice one, @sinapse — z-index problems are one of those fiddly layout issues that eat time. For anyone else who runs into this: the thing that usually "locks" a wrapper on top is not z-index itself but the stacking context that the wrapper (or one of its ancestors) created.

Common causes and quick checks:

• z-index works relative to the nearest stacking context, not globally.
• A stacking context is created by things like position with a z-index, transform (not none), opacity < 1, filter, mix-blend-mode, isolation: isolate, will-change, etc. See MDN for the full list: Understanding z-index and z-index reference.
• Use DevTools: inspect parent elements for transform, opacity, or will-change — remove or change those and see if the stacking changes.

Quick fixes

1. Move the overlay element out of the wrapper (append to body) so it is in a different stacking context.
2. Remove the property creating the stacking context from the parent (e.g., transform) or set a z-index on that parent to control ordering.
3. As a last resort, set the element you want on top as a direct child of body and give it a high z-index.

Example (debugging hint):

/* parent creates stacking context */
.parent { transform: translateZ(0); }

/* child cannot escape parent's stacking context */
.child { position: absolute; z-index: 9999; }

If you still see the problem, paste the minimal HTML/CSS that reproduces it and someone here can point out exactly which stacking context is the blocker.