CSS z-index not working -- stacking context explained

z-index has no effect even with a very high value. An element with z-index: 9999 appears behind an element with z-index: 1.

z-index only works on positioned elements. More importantly, z-index creates stacking contexts. A child cannot appear above the parent sibling if the parent has a lower z-index. Things that create stacking contexts: opacity < 1, transform, filter, will-change. Use isolation: isolate for intentional stacking contexts.

z-index comparison only happens within the same stacking context.