Smart Layer Grouping

We already know about stacking context, but sometimes we need to forcibly " isolate " an element so its internal z-index doesn't conflict with external ones. For this, there's the isolation: isolate property.

Why Is This Needed?

Imagine you created a complex component with many layers. You want to be sure no internal layer " pops out " above the site header or modal window.

.widget {
  isolation: isolate; /* Creates new stacking context without using z-index or transform */
}