css stacking context
in CSS/HTML,
A stacking context is a 3D conceptualisation of an element.
This can be a root stacking context, as created by the html element.
Or it can be a local stacking context, as created by specific properties and
values.
Rules: What creates a stacking context
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#the_stacking_context
Rules: Paint order of the stack's inner elements:
- Elements with a negative stack level, typically elements with z-index: -1
- Elements with a position value of static.
- Elements with a stack level of 0, typically positioned elements with a z-index value of auto.
- Elements with positive stack levels, e.g. a positioned element with a z-index value of 1 or higher.
- Two elements with the same stack level are layered based on their source order. Successive elements stack on top of their predecessors.