What CSS Properties Trigger a Stacking Context?

Which CSS Properties Create a Stacking Context?

Stacking contexts are essential for controlling the order in which elements overlap and appear on a web page. Various CSS properties can trigger the creation of a new stacking context, effectively isolating the element and its descendants from the layout flow.

Properties that Create a Stacking Context:

The following properties, in addition to the widely known z-index, establish a stacking context:

1. transform: Any transform value other than none
2. opacity: Any value less than 1
3. perspective: Any value other than none

Other Properties That Influence Stacking Contexts:

In addition to these core properties, the following scenarios also trigger the creation of a stacking context:

• z-index: Setting z-index to a non-auto value on a positioned element (except for fixed elements in some browsers)
• flow-from: Setting flow-from to a non-none value on an element with content other than normal
• Page-margin boxes in paged media
• filter: Setting filter to a non-none value
• isolation and mix-blend-mode: Setting both properties in compositing and blending
• will-change: Setting will-change to a property that would create a stacking context
• clip-path and mask: Setting either property to a non-none value in masking

Note: A stacking context is distinct from a block formatting context, which governs the layout of block elements within an element.

The above is the detailed content of What CSS Properties Trigger a Stacking Context?. For more information, please follow other related articles on the PHP Chinese website!