The stacking context is a three-dimensional conceptualization of HTML elements along imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.
Root element of the document (<html>).
Element with a position value absolute or relative and z-index value other than auto.
Element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop).
Element that is a child of a flex (flexbox) container, with z-index value other than auto.
Element that is a child of a grid (grid) container, with z-index value other than auto.
Element with a mix-blend-mode value other than normal.
Element with a isolation value isolate.
Element with a -webkit-overflow-scrolling value touch.
Element with a contain value of layout, or paint, or a composite value that includes either of them (i.e. contain: strict, contain: content).
Each stacking context is completely independent of its siblings: only descendant elements are considered when stacking is processed.
Note: The hierarchy of stacking contexts is a subset of the hierarchy of HTML elements because only certain elements create stacking contexts. We can say that elements that do not create their own stacking contexts are assimilated by the parent stacking context.