Custom dropdowns

When I built a custom dropdown for the contact form, it looked beautiful — until I scrolled down and the dropdown options appeared above the site header.

It was a subtle but jarring UX failure. The header had z-50 (very high). The dropdown had z-50 too. They were competing, and the dropdown kept winning.

The Stacking Context Problem

I had set the dropdown panel to z-40, lower than the header's z-50. But the dropdown still appeared above the header. Why?

Because I had placed the dropdown inside a container with its own stacking context, and I'd forgotten to set position: relative properly.

The Fix: Understand Stacking Contexts

The solution was simple once I understood the problem: ensure the dropdown container has a proper stacking context with position: relative and z-index that respects the header's layer.

The header stays at z-50. The dropdown lives at z-40 — and it stays there.

The YouTube Video That Helped

This video explains CSS stacking contexts better than any documentation I've read: