Why does a transform or opacity declaration create a new stacking context?

The child may be competing inside a stacking context that is itself behind the panel. A transform can create a stacking context, as can opacity below 1. A stacking context is self-contained: its descendants are ordered within it, and the context as a whole is treated as one unit in its parent. That means the dropdown’s z-index does not let it independently outrank an outside element that stacks above its parent context. [S1]

Think in terms of two comparisons: first, where the dropdown sits within its own context; second, where that entire context sits against the panel. If the parent context is behind the panel, raising the dropdown alone may change only the first comparison.

Assume this markup is nested as shown, and assume the .card transform is present in the page’s CSS:

Page stacking context
├── .card (transform creates a stacking context)
│   └── .dropdown (z-index: 9999)
└── .panel (stacks above .card)

The key detail is that .dropdown belongs to .card’s context. Even with a very large z-index, it cannot independently rise above .panel if .card’s context is below .panel in the parent context. A transform creates a stacking context; the source also identifies opacity below 1 as one. [S1]

This diagram describes the assumed stacking relationship, not a promise that those selectors or values alone produce a particular result in every page. Check the actual element nesting and which contexts are being compared.

Work from the outside inward:

1. Identify the element that is visibly behind and the element that should appear above it.
2. Trace each element upward through its ancestors to find the contexts containing them.
3. Look for a transform or an opacity value below 1 on the relevant ancestors; either can create a context. [S1]
4. Compare the two parent contexts in their shared parent context. If one is behind, adjusting only its child’s z-index will not let that child escape the context boundary. [S1]
5. Decide whether to adjust the relationship between the parent contexts or change the structure so the elements participate in the intended context. Then retest the actual overlap.

Keep a short note of what you changed and which two elements you compared. That makes it easier to tell whether you fixed the parent-level ordering or merely altered the child’s internal order.

Share the nesting, the suspected context-creating declaration, and the comparison you want reviewed. For example:

Observed: [dropdown] appears behind [panel].
Nesting: [dropdown] is inside [parent]; [panel] is outside it.
Declaration to inspect: [transform or opacity below 1, if present].
Current hypothesis: [parent context] may stack below [panel].
Check requested: compare the two parent contexts before changing the child z-index.

Call it a hypothesis until you have checked the page’s actual declarations and stacking relationships. The cited reference establishes that transform and opacity below 1 create contexts and that descendants cannot independently outrank an element above their parent context. It does not establish which elements or values your particular page uses; inspect those directly. [S1]