How Do Different CSS Properties Create Stacking Contexts?

Stacking Contexts in CSS

In CSS, certain properties necessitate the creation of stacking contexts, which establish separate layering environments within the page. Beyond the well-known z-index property, several additional properties trigger the formation of these contexts.

Creating Stacking Contexts

The following properties establish stacking contexts for an element and its descendants:

• Z-index: Any value other than auto on a positioned element (excluding fixed elements in newer browsers)
• Opacity: Less than 1
• Transform: Non-none values and transform-style: preserve-3d
• Perspective: Non-none values

Additional Properties

Furthermore, the following properties also contribute to stacking context creation:

• Flow-from: Non-none on an element with non-normal content
• Page-margin box: In paged media
• Filter: Non-none
• Isolation: Isolate in compositing and blending
• Mix-blend-mode: Non-normal values
• Will-change: Non-initial values for properties that trigger stacking contexts
• Clip-path/mask: Non-none values

Distinction from Block Formatting Context

It's crucial to distinguish between stacking contexts and block formatting contexts, which are two separate concepts in CSS layout. Stacking contexts govern positioning and layering, while block formatting contexts influence the content flow and wrapping behavior of block elements.

The above is the detailed content of How Do Different CSS Properties Create Stacking Contexts?. For more information, please follow other related articles on the PHP Chinese website!