Comparison
Stacking contextvsz-index
Stacking context
you set `z-index: 9999` and the element still sits behind the header.
A self-contained group for paint order: elements inside it are stacked among themselves, and the whole group is placed as one unit within its parent context. A `z-index` only competes with siblings in the same context, so a huge value inside a low-stacked ancestor loses to anything above that ancestor. Contexts are created by more properties than most people expect — `opacity` below 1, `transform`, `filter`, `position: fixed`, `will-change` — which is why adding a fade can break a dropdown.
Full entry →z-index
you keep raising the number in one file and lowering it in another until the overlay is on top.
An integer that orders positioned elements within their stacking context, along the axis pointing out of the screen. It only applies to positioned and flex or grid items, and only compares siblings within one context, so it is far less global than it looks. The escalating-number pattern it encourages is why teams end up defining a small named scale and forbidding raw values.
Full entry →