Why is my z-index not working in CSS, even with a very high number?

The rule

z-index only orders elements within the same stacking context. A stacking context acts like a sealed box: everything inside is compared with each other first, and the box as a whole is placed in its parent context with the box's own z-index. A child with z-index: 9999 can never rise above a sibling of its parent context that has a higher order.

When does z-index apply at all

It works on positioned elements (relative, absolute, fixed, sticky) and on flex or grid children (even if not positioned). A plain static block ignores it.

What creates a new stacking context (common surprises)

• position with a z-index other than auto
• position: fixed or sticky
• opacity below 1
• transform, filter, perspective, backdrop-filter, will-change of those
• isolation: isolate
• contain: layout/paint, and mix-blend-mode
• A flex or grid child with a z-index

Example: the card has transform: translateY(0) on hover, so it becomes a stacking context. The dropdown, a child of a different transformed element, is trapped inside its own context.

How to debug

In Chrome DevTools use the Layers panel or the "Stacking context" hint in the Computed tab, or walk up the ancestors and note the first one that creates a context.

Fixes

1. Move the dropdown out of the trapped ancestor: render it in a portal at the end of body (React createPortal, Vue Teleport, Livewire/Alpine x-teleport).
2. Remove the accidental context (transform, opacity, filter on the ancestor).
3. Use isolation: isolate deliberately on components so their z-indexes cannot leak, and keep a small scale of values (for example 10 dropdown, 20 sticky, 30 modal, 40 toast).

Native alternative

For modals and popovers, the <dialog> element with showModal() and the Popover API (popover attribute) render in the browser top layer, above any z-index.