Which CSS properties create a stacking context?
Solution 1:
One or more of the following scenarios will cause an element to establish its own stacking context1 for its descendants:
-
The root element always holds a root stacking context. This is why you can start arranging elements without having to position the root element first. Any element that doesn't already participate in a local stacking context (generated by any of the other scenarios below) will participate in the root stacking context instead.
-
Setting
z-index
to anything other thanauto
on an element that is positioned (i.e. an element withposition
that isn'tstatic
).-
Note that this behavior is slated to be changed for elements with
position: fixed
such that they will always establish stacking contexts regardless of theirz-index
value. Some browsers have begun to adopt this behavior, however the change has not been reflected in either CSS2.1 or the new CSS Positioned Layout Module yet, so it may not be wise to rely on this behavior for now.This change in behavior is explored in another answer of mine, which in turn links to this article and this set of CSSWG telecon minutes.
-
Another exception to this is with a flex item and a grid item. Setting
z-index
will always cause it to establish a stacking context even if it isn't positioned.
-
-
Setting
opacity
to anything less than1
. -
Transforming the element:
-
Setting
transform
to anything other thannone
. -
Setting
transform-style
topreserve-3d
. -
Setting
perspective
to anything other thannone
.
-
-
Creating a CSS region: setting
flow-from
to anything other thannone
on an element whosecontent
is anything other thannormal
. -
In paged media, each page-margin box establishes its own stacking context.
-
In filter effects, setting
filter
to anything other thannone
. -
In compositing and blending, setting
isolation
toisolate
and settingmix-blend-mode
to a value different fromnormal
-
In will change, setting
will-change
to a property whose any non-initial value would create a stacking context. -
In masking, setting
clip-path
/mask
with a value other thannone
.
Note that a block formatting context is not the same as a stacking context; in fact, they are two completely independent (although not mutually exclusive) concepts.
1This does not include pseudo-stacking contexts, an informal term that simply refers to things that behave like independent stacking contexts with respect to positioning, but actually participate in their parent stacking contexts.