"Stacking contexts are incredibly useful, but they're also widely misunderstood and often mistakenly created, leading to a slew of layout issues that can be tricky to solve. Have you ever set z-index: 99999 on an element in your CSS, and it doesn't come out on top of other elements? A value that large should easily place that element visually on top of anything else, assuming all the different elements are set at either a lower value or not set at all."
"A webpage is usually represented in a two-dimensional space; however, by applying specific CSS properties, an imaginary z-axis plane is introduced to convey depth. This plane is perpendicular to the screen, and from it, the user perceives the order of elements, one on top of the other. The idea behind the imaginary z-axis, the user's perception of stacked elements, is that the CSS properties that create it combine to form what we call a stacking context."
"Imagine your webpage as a desk. As you add HTML elements, you're laying pieces of paper, one after the other, on the desk. The last piece of paper placed is equivalent to the most recently added HTML element, and it sits on top of all the other papers placed before it. This is the normal document flow, even for nested elements. The desk itself represents the root stacking context, formed by the <html> element, which contains all other folders."
Stacking contexts create an imaginary z-axis that establishes perceived depth and the rendering order of elements. Specific CSS properties such as position with z-index, opacity, transform, and contain generate new stacking contexts that group an element and its descendants and isolate that group from the parent stacking order. Elements inside a stacking context are ordered relative to each other but cannot overlay elements in other stacking contexts, so very large z-index values can still fail to bring an element on top. The root stacking context is formed by the <html> element. Resolving layout issues often requires identifying and altering unwanted stacking contexts or moving elements out of them.
Read at Smashing Magazine
Unable to calculate read time
Collection
[
|
...
]