An element hidden behind another despite a higher z-index

z-index: 999 on a dropdown. It still renders behind a section with no z-index at all.

IntermediateRead 6 minDoing: 30 to 40 minutes7 steps

What you'll have at the end

The dropdown or modal renders above everything else, with the stacking context that caused the bug identified and written down

Before you start

You need

A dropdown, tooltip, or modal that already has position set to absolute or fixed and a real z-index, but still renders underneath a section elsewhere on the same page.

Not covered

An element that's clipped or cut off rather than fully covered by another section: that's overflow clipping on a parent, a different bug with a different fix.

Leans on

7 steps

Where to go next

Fix a CSS specificity conflict without !important

for a rule that seems to do nothing because a different rule is winning on specificity, not because of stacking order: a different bug, a different fix.

Checked 20 Aug 2026

Part of the CSS cookbook