z-index only works inside its own stacking context

A dropdown with z-index: 9999 that still sits underneath the header is not a numbering problem. The two elements are being compared inside different stacking contexts, and the comparison that decides the outcome happens between their ancestors, where the numbers are 1 and 2.

.site-header {
    position: relative;
    z-index: 2;
    opacity: .98;   /* this alone creates a stacking context */
}

.content {
    position: relative;
    z-index: 1;
}

.content .dropdown {
    position: absolute;
    z-index: 9999;  /* the highest layer inside .content, and nowhere else */
}

Anything positioned with a z-index other than auto creates a context, and so do several properties that look purely visual: opacity below 1, and transform — which is how a hardware-acceleration tweak breaks a menu that worked the day before. Raising the number cannot help, because children are sorted against their siblings and the whole subtree moves as one. The fix is either to remove whatever created the context or to move the dropdown out of it in the markup. Chrome’s inspector will not tell you which; searching the ancestors for opacity and transform usually will.