Stacking Context
When?
Z-index and the stacking context are created when:
- Items set to a
position
to be set tofixed
,sticky
,absolute
orrelative
first for the z-index to work OR if atransform
oropacity
of less than 1 is applied - Nesting if an element is contained within a containing element it cannot be outside of it’s containing elements position.
- Using
transform
oropacity
(with a value below 1) can change an elements stacking context, by moving it up towards the top. - Child elements of a flexbox or grid container where the
z-index
is other thanauto
. - An element that has its
mix-blend-mode
set to other thannormal
.