Comparison
Block formatting contextvsStacking context
Block formatting context
you added `overflow: hidden` to the parent and the floats inside it stopped escaping the bottom.
An independent layout region whose contents cannot interact with the layout outside it: floats are contained, margins do not collapse through it, and it does not overlap adjacent floats. It is created by side effects of other properties — `overflow` other than visible, `display: flow-root`, flex and grid containers, absolute positioning — which is why the fixes for float and margin bugs have always looked like unrelated magic. `display: flow-root` exists to create one on purpose, with no side effects.
Full entry →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 →