Stacking Contexts: The Hidden Culprit Behind z-index Frustration

Frontend developers wrestling with z-index often find the problem isn't the property itself, but stacking contexts. Josh Comeau’s recent guide uses a design-software analogy: think of Photoshop or Figma layer groups. If a child element lives inside layer group A, which sits below layer group B, no amount of tweaking that child's settings can push it above anything in B. The only fixes are moving the entire group A above B, or removing the group structure altogether.

Nothing is going to put that moustache on top of the dog unless you get it out of that stacking context or move the whole stacking context.

Consider a minimal example: a "Big Thing" element inside a header. No z-index value will lift it above a tan <main> element stacked on top. Comeau offers practical workarounds — avoid triggering stacking contexts unnecessarily, or rearrange the DOM so "Big Thing" isn't a child of the header in the first place. In that rearranged version, the stacking context loses its grip entirely.