Search
4 results for “stacking-context”
Search results
CSS Box Model & Stacking Context
Why box-sizing changes what "width" actually measures, and why a z-index of 9999 can still render below an element with z-index 5 once stacking contexts are involved.
What does box-sizing: border-box actually change about how width and height are calculated?
With the default `content-box`, `width` applies only to the content area, so padding and border are added on top, a 200px-wide box with 20px padding and a 5px border renders at 250px total. `border-box` makes `width` include content, padding, and border together, so that same 200px `width` stays 200px total regardless of padding or border, the content area itself shrinks to make room instead. This is why most modern projects apply `box-sizing: border-box` globally, it makes an element's declared width predictable and stable as padding/border change, instead of recalculating the total size by hand every time.
An element has z-index: 9999 but still renders behind another element with z-index: 5. How is that possible?
z-index values are only compared within the same stacking context, they are not globally comparable numbers. If the z-index: 9999 element sits inside a parent that itself created a new stacking context (say, that parent has opacity less than 1, or z-index: 1), the entire parent, and everything inside it, is treated as a single unit when compared against sibling stacking contexts elsewhere in the document. A useful mental model is version numbers: an element at z-index 6 inside a parent context at z-index 4 effectively renders at "4.6", which is still below a sibling element at z-index 5 ("5.0") in the root context, no matter how high the inner z-index value looks in isolation.
Name three CSS properties, besides z-index with positioning, that create a new stacking context, and why does that matter when debugging a layering bug?
Opacity below 1, any non-none `transform`, and `filter` or `backdrop-filter` with a value other than `none` all create a new stacking context, along with several others like `isolation: isolate` and `will-change` naming a stacking-context property. This matters when debugging because a completely unrelated-looking style change, adding a fade transition via opacity, or a hover effect via transform, can silently create a new stacking context and change how that element's children layer against the rest of the page, a z-index layering bug that has nothing to do with z-index values themselves, but with an accidental new stacking context somewhere in the ancestor chain.