In the previous part of this article, Using z-index, we showed that the rendering order of certain elements is influenced by their z-index
value. This occurs because these elements have special properties which cause them to form a stacking context.
A stacking context is formed, anywhere in the document, by any element in the following scenarios:
- 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 container, with
z-index
value other than auto
. - Element that is a child of a
grid
container, with z-index
value other than auto
. - Element with an
opacity
value less than 1
(See the specification for opacity). - Element with a
mix-blend-mode
value other than normal
. - Element with any of the following properties with value other than
none
: - Element with an
isolation
value isolate
. - Element with a
will-change
value specifying any property that would create a stacking context on non-initial value (see this post). - Element with a
contain
value of layout
, or paint
, or a composite value that includes either of them (i.e. contain: strict
, contain: content
).
Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index
values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.
In summary:
- Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
- Each stacking context is completely independent of its siblings: only descendant elements are considered when stacking is processed.
- Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.
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.