cssz-index

Which CSS properties create a stacking context?


I'm studying about stacking contexts and doing some tests with the properties that create a stacking context.

I did several tests and found that, in addition to z-index, of course, the following properties also create a stacking context:

Are there other properties that apply a stacking context?


Solution

  • One or more of the following scenarios will cause an element to establish its own stacking context1 for its descendants:

    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.


    1 This 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.