What is a stacking context, and why can z-index: 9999 still be covered?

z-index only compares elements inside the same stacking context. If an ancestor creates a new one, its descendants can never rise above elements outside it - no matter the value.

Things that create a stacking context:

• non-static position plus a non-auto z-index
• opacity < 1, transform, filter, backdrop-filter, will-change, mix-blend-mode, isolation: isolate
• position: fixed/sticky, flex/grid children with z-index

.modal-root { isolation: isolate; } /* isolate deliberately instead of escalating */

The durable fix: portal overlays to the DOM root rather than bumping z-index.