[Feature Proposal] add isolation: isolate; utility

[mainej]

I recently needed to create a new stacking context, to avoid problems created by the interaction between a .z-10 element and a later .absolute element. I reached first for a .transform wrapper, which does the trick, but thought I'd go read about stacking contexts (again). I learned about isolation: isolate;, which seems purpose built for this case. Does it have good enough browser support to be a utility?

Here's a pared down demonstration of the problem. I don't want the part of the .z-10 text that is "under" the menu to appear, but it does.

<div class="space-y-4">
   <div>
      <div class="relative z-10">Shouldn't show through</div>
   </div>
   <div class="relative">
      <button>Open menu</button>
      <div class="absolute bottom-0 mb-6 h-20 w-20 bg-gray-300"></div>
   </div>
</div>

Creating a stacking context fixes the problem:

<div class="space-y-4">
   <div style="isolation: isolate;"> <!-- class="transform" works too -->
      <div class="relative z-10">Shouldn't show through</div>
   </div>
   <div class="relative">
      <button>Open menu</button>
      <div class="absolute bottom mb-6-0 h-20 w-20 bg-gray-300"></div>
   </div>
</div>

If there's a better solution, I'd be interested to hear.

[mainej]

An isolate utility was introduced in v2.1

[adamwathan]

Ah sorry I never even saw this post, but yep it's added now so I hope that's helpful!

[mainej]

Yep, loving all the new tools! 🎉