Isolation Utilities isolate

Control stacking context and z-index behavior by creating new stacking contexts with isolation utilities.

Quick Reference

isolate

Create a new stacking context

isolation: isolate

isolation-auto

Use default isolation behavior

isolation: auto

Interactive Examples

Basic Isolation

Without Isolation

Z-10
Z-20
Z-5

With Isolation

Z-10
Z-20
Z-5
<div class="isolate relative">
  <div class="absolute z-10">Element</div>
</div>

Stacking Context Control

Global Stacking

30
40

Isolated Stacking

30
40

Blend Mode Isolation

Without Isolation

With Isolation

<div class="isolate">
  <div class="mix-blend-multiply">Blend</div>
</div>

Complex Layering

Group 1
Group 2

Common Use Cases

🎨 Blend Mode Control

Isolate blend modes to specific containers.

<div class="isolate">

📚 Modal Layers

Create independent stacking contexts for modals.

<div class="isolate fixed">

🎯 Component Isolation

Prevent z-index conflicts between components.

<section class="isolate">

🖼️ Image Overlays

Control overlay stacking within image containers.

<div class="isolate relative">

🎪 Animation Groups

Isolate animated elements from global stacking.

<div class="isolate animate-*">

🔧 Third-party Widgets

Prevent external widgets from affecting your layout.

<div class="isolate">

Understanding Stacking Context

What is Stacking Context?

Independent Layer

Creates a new 3D rendering layer separate from parent context

Z-index Scope

Z-index values only compete within the same stacking context

Atomic Unit

The entire context moves as one unit in the parent's stacking order

Blend Isolation

Isolates blend modes and filters to the context

Visual Demonstration

Global Stacking Context
10
20
Isolated Stacking Context
10
20

When to Use Isolation

✅ Use Isolation When

  • •
    Z-index Conflicts: Elements compete unexpectedly in global stacking
  • •
    Blend Mode Control: Need to limit blend effects to specific areas
  • •
    Component Boundaries: Want to isolate component internals
  • •
    Third-party Content: Preventing external CSS from interfering
  • •
    Complex Overlays: Multiple layered elements need organization

❌ Avoid When

  • •
    Simple Layouts: Basic stacking works fine without isolation
  • •
    Performance Critical: Creates additional rendering layers
  • •
    Global Effects Needed: Want elements to interact across contexts
  • •
    Unnecessary Complexity: Adding isolation without clear benefit
  • •
    Browser Compatibility: Targeting very old browsers

Browser Support & Performance

🌐 Browser Support

Chrome✓ 41+
Firefox✓ 36+
Safari✓ 8+
Edge✓ 79+
IE✗ Not Supported

⚡ Performance Notes

  • • Creates new rendering layers (GPU acceleration)
  • • May increase memory usage slightly
  • • Can improve performance for complex animations
  • • Helps with paint optimization
  • • Use sparingly to avoid layer explosion
  • • Test on lower-end devices

Related Layout Classes

block

Display utilities

float-*

Float utilities

clear-*

Clear utilities

isolate

Current page