The `isolation` property

A better way to think about the z-order.

^ Scroll

A sticky header and floating card with isolated stacking contexts

There are a few ways to create stacking contexts, most of them occur implicitly -- the MDN docs has a full list here.

The odd one out in that list is isolation, an explicit way of creating a new stacking context:

.container {
  isolation: isolate;
}

.item {
  z-index: 10;
}

This allows elements to manage their own z-index values without worrying about breaking the page elsewhere.