CSS isolation Property

What You’ll Learn

The isolation property controls whether an element creates a new stacking context. Use it to keep child layers predictable and prevent unexpected overlap with the rest of the page.

Introduction

The isolation property in CSS determines whether an element should create a new stacking context. Stacking contexts control how overlapping elements are painted and how z-index values compete with each other.

By controlling isolation, you can manage how elements overlap and interact visually within a layout, which helps prevent surprising layering bugs in complex interfaces.

Definition and Usage

Apply isolation: isolate on a wrapper when you want the element and its descendants to stack as one isolated group. This is especially helpful for components that use negative z-index, decorative backgrounds, or mix-blend-mode.

📝 Syntax

The syntax for the isolation property accepts one of two keyword values:

element {

  isolation: auto | isolate;

}

Basic Example

.card {

  position: relative;

  isolation: isolate;

}



.card::before {

  content: "";

  position: absolute;

  z-index: -1;

  inset: 0;

  background: #fbbf24;

}

Default Value

The default value of the isolation property is auto. The browser creates a stacking context only when other properties such as z-index, opacity, transform, or filter require it.

Syntax Rules

• Only two values: auto and isolate.
• isolate always creates a new stacking context.
• The property is not inherited.
• Often paired with position: relative on component wrappers.
• Useful with negative z-index and mix-blend-mode.

💎 Property Values

What Is a Stacking Context?

A stacking context is a group of elements that stack together as one unit relative to elements outside the group:

• Without isolation — a child with z-index: -1 may render behind ancestor backgrounds or page content in unexpected ways.
• With isolation: isolate — negative z-index children stay behind the wrapper’s own background but do not escape the component.
• Blend modes — isolation limits mix-blend-mode blending to the component instead of the whole page.

Examples Gallery

Contain negative z-index layers, limit blend modes, compare auto behavior, and wrap a component for predictable stacking.

.card {

  position: relative;

  isolation: isolate;

  background: #fff;

}



.card::before {

  content: "";

  position: absolute;

  z-index: -1;

  inset: 0;

  background: linear-gradient(135deg, #fb7185, #fbbf24);

}

.badge {

  position: relative;

  isolation: isolate;

  background: #fff;

}



.badge-icon {

  mix-blend-mode: multiply;

}

.layer-front {

  position: absolute;

  isolation: auto;

  z-index: 1;

}

.widget {

  position: relative;

  isolation: isolate;

  background: #fff;

}



.widget-glow {

  position: absolute;

  z-index: -1;

  inset: -6px;

  background: linear-gradient(135deg, #a78bfa, #38bdf8);

}

♿ Accessibility

• Isolation does not replace contrast checks — layered backgrounds must still meet readability standards.
• Avoid hiding focus outlines — negative z-index decorations should not cover focusable controls.
• Test keyboard navigation — stacking changes should not trap or obscure interactive elements.
• Do not rely on layering alone — screen readers follow DOM order, not visual stacking.
• Keep decorative layers non-interactive — use aria-hidden="true" on purely visual glow elements.

💡 Best Practices