“Just increase the z-index” is the most common (and most often wrong) fix for a stacking problem — z-index only works within a stacking context, and understanding what creates one is the actual fix.
/* This creates a NEW stacking context */
.modal-backdrop {
position: fixed;
z-index: 1000;
/* opacity, transform, filter, and several other properties
ALSO create a new stacking context even without z-index */
}
/* z-index: 9999 here is trapped INSIDE its parent's stacking context -
it can never appear above elements outside that context, no matter how high */
.trapped-element {
position: relative;
z-index: 9999;
}
What Creates a Stacking Context
Setting position plus z-index is the classic trigger, but opacity < 1, transform, filter, and will-change all create one too — often unexpectedly. If a huge z-index value still isn't winning, check whether an ancestor accidentally created a stacking context that's trapping it.