Methods to create a new stacking context

The Concept of Stacking Context

Stacking context is an important concept in CSS that determines the stacking order of elements on the Z-axis. When an element forms a stacking context, its child elements are confined within this context and do not interact with external elements in terms of stacking. Understanding how to create stacking contexts is crucial for controlling the stacking order of page elements.

Creating Stacking Context with the position Property

When an element's position property is set to relative, absolute, fixed, or sticky, and its z-index value is not auto, a new stacking context is created.

.parent {
  position: relative;
  z-index: 1; /* Creates a new stacking context */
}

.child {
  position: absolute;
  z-index: 10; /* Relative to the .parent stacking context */
}

In this example, the .parent element creates a new stacking context, and the z-index value of the .child element is only effective within this context.

Creating Stacking Context with the opacity Property

When an element's opacity value is less than 1, a new stacking context is automatically created.

.translucent {
  opacity: 0.99; /* Creates a new stacking context */
  /* Even without setting z-index, it will still create one */
}

Note that even an opacity value as close to 1 as 0.99 will trigger the creation of a stacking context.

Creating Stacking Context with the transform Property

Any non-none transform value will create a new stacking context.

.transformed {
  transform: translateZ(0); /* Creates a new stacking context */
  /* Even the simplest 3D transform will trigger it */
}

This method is often used to force the creation of a stacking context without affecting layout.

Creating Stacking Context with the filter Property

The filter property (with a non-none value) will create a new stacking context.

.filtered {
  filter: blur(0); /* Creates a new stacking context */
  /* Even a blur radius of 0 will trigger it */
}

Creating Stacking Context with the will-change Property

When the will-change property specifies attributes that may create a stacking context, the browser will create the stacking context in advance.

.will-change {
  will-change: transform; /* Hints to the browser to prepare for creating a stacking context */
}

Creating Stacking Context with the contain Property

The paint or strict values of the contain property will create a new stacking context.

.contained {
  contain: paint; /* Creates a new stacking context */
}

Creating Stacking Context with the mix-blend-mode Property

Non-normal values of mix-blend-mode will create a stacking context.

.blended {
  mix-blend-mode: multiply; /* Creates a new stacking context */
}

Creating Stacking Context with the isolation Property

isolation: isolate explicitly creates a new stacking context.

.isolated {
  isolation: isolate; /* Specifically used to create a stacking context */
}

Creating Stacking Context with the -webkit-overflow-scrolling Property

On iOS, -webkit-overflow-scrolling: touch will create a stacking context.

.scrollable {
  -webkit-overflow-scrolling: touch; /* Creates a stacking context on iOS */
}

Creating Stacking Context with the clip-path Property

Non-none values of clip-path will create a stacking context.

.clipped {
  clip-path: circle(50%); /* Creates a new stacking context */
}

Creating Stacking Context with the mask Property

Non-none values of mask or mask-image will create a stacking context.

.masked {
  mask-image: linear-gradient(black, transparent); /* Creates a stacking context */
}

Creating Stacking Context with the perspective Property

Non-none values of perspective will create a stacking context.

.perspective {
  perspective: 100px; /* Creates a new stacking context */
}

Creating Stacking Context with the backdrop-filter Property

Non-none values of backdrop-filter will create a stacking context.

.backdrop {
  backdrop-filter: blur(5px); /* Creates a new stacking context */
}

Practical Applications of Stacking Context

In real-world development, creating stacking contexts is often used to solve z-index stacking issues. For example, when you need to ensure that elements within a component do not conflict with external elements in terms of stacking:

<div class="modal">
  <div class="modal-content">Content</div>
</div>
<div class="dropdown">
  <div class="dropdown-menu">Menu</div>
</div>

.modal {
  position: fixed;
  z-index: 1000; /* Creates a stacking context */
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  z-index: 1001; /* Only effective within the .dropdown stacking context */
}

In this example, even though the z-index value of .dropdown-menu is larger than that of .modal, it will not appear above .modal because they are in their respective stacking contexts.

Nesting Characteristics of Stacking Contexts

Stacking contexts can be nested, and the stacking order of child elements is only effective within the parent stacking context:

<div class="context-1">
  <div class="context-2">
    <div class="box"></div>
  </div>
</div>

.context-1 {
  position: relative;
  z-index: 1;
}

.context-2 {
  position: relative;
  z-index: 10; /* Only effective within context-1 */
}

.box {
  position: absolute;
  z-index: 100; /* Only effective within context-2 */
}

Performance Considerations for Stacking Contexts

While creating stacking contexts can solve many problems, excessive use may impact performance:

1. The browser requires additional memory to manage stacking contexts.
2. Certain properties (e.g., filter, backdrop-filter) trigger hardware acceleration but may also cause font rendering issues.
3. Too many stacking contexts increase the complexity of the browser's stacking order calculations.

Debugging Stacking Context Issues

In developer tools, you can debug stacking contexts in the following ways:

1. Check the stacking context markers for elements in the Elements panel.
2. Use the 3D view to inspect the stacking order of elements.
3. Temporarily modify z-index values to test stacking relationships.

/* Styles added for debugging */
.debug-context {
  outline: 2px dashed red;
  background-color: rgba(255,0,0,0.1);
}

Summary of Conditions for Creating Stacking Contexts

The following is a complete list of conditions that create new stacking contexts:

1. The root element of the document (html).
2. position is absolute/relative and z-index is not auto.
3. position is fixed/sticky.
4. Child of a flex container with z-index not auto.
5. Child of a grid container with z-index not auto.
6. opacity value less than 1.
7. transform value not none.
8. mix-blend-mode value not normal.
9. filter value not none.
10. backdrop-filter value not none.
11. perspective value not none.
12. clip-path value not none.
13. mask/mask-image/mask-border value not none.
14. isolation value is isolate.
15. -webkit-overflow-scrolling value is touch.
16. will-change specifies properties that create stacking contexts.
17. contain value is layout/paint/strict.

Practical Example of Stacking Context

A common example is creating a custom dropdown menu:

<div class="nav">
  <button class="nav-toggle">Menu</button>
  <div class="nav-dropdown">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

.nav {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  z-index: 100;
  display: none;
}

.nav:hover .nav-dropdown {
  display: block;
}

/* Ensure the dropdown menu is not obscured by other content */
.nav {
  isolation: isolate;
}

In this example, isolation: isolate ensures that the dropdown menu is not affected by the z-index of other elements.