What's new in CSS?

isolate

isolation: isolate

Although this property has had baseline support since 2020, I feel it's unknown enough to warrant inclusion here.

It allows an element to create a new stacking context that is confined to that element. The examples below show its usefulness with z-indexed elements on your page.

Standard CSS

div {
  isolation: isolate;
}

Tailwind

<div class="isolate"></div>

isolation: auto (default)

Notice how the below elements interact with the bottom right navigation component (which is fixed with a z-index of 30). This is a common issue with fixed headers etc.

isolation: isolate

Instead of whacking a z-[100000] on the fixed component (which then inevitably causes another stacking issue elsewhere), isolation:isolate allows us to confine the stacking context of the below boxes to this particular containing element.

isolate

Menu