What CSS Properties Create Stacking Contexts Beyond `z-index`?

Which CSS Properties Trigger Stacking Contexts?

In the realm of CSS, stacking contexts determine the order in which elements are layered on the page. While the z-index property is a well-known trigger for creating a stacking context, there are additional properties that play a role.

Beyond Z-Index: Properties that Induce Stacking Contexts

The list you provided correctly identifies several properties that create stacking contexts:

• transform (other than 'none')
• opacity (less than 1)
• perspective

Expanding the List

However, the CSS specification specifies several other properties that can create stacking contexts, including:

• Flow-from: none: Creates a region-based stacking context
• Page margins in paged media: Each page margin box establishes its own context
• Filter: not 'none': Triggers stacking contexts in filter effects
• Isolation: isolate, mix-blend-mode: not 'normal': Sets a stacking context in compositing and blending
• Will-change: a context-creating property: Fetches a stacking context for the element
• Clip-path/mask: not 'none': Creates a stacking context in masking

Note: A stacking context is distinct from a block formatting context. While they can overlap, they are separate concepts.

It's important to understand the properties that create stacking contexts to control the ordering of elements on your pages effectively and achieve desired layout effects.

The above is the detailed content of What CSS Properties Create Stacking Contexts Beyond `z-index`?. For more information, please follow other related articles on the PHP Chinese website!