In a recent Kevin Powell video (it’s the first trick of five), he talks about isolation: isolate;. The name is strange, but the point of it is that it gives you a new “stacking context” in CSS without any side effects. Stacking context, as in, a new zone for z-index values.
This comes up sometimes when I have an element (or pseudo-element) that I want to be below all other elements in this context but don’t have a great way to do it. I know in my head that z-index: -1 will do it, but I’ve long been afraid of reaching for that because it can put the element too low, going underneath potential backgrounds of parent elements.
There is no need to be afraid if the element has a new stacking context. You can get one by doing something like overflow: hidden;, but ya know, that hides overflow (plus a block formatting context). You can get one by using position: relative; plus putting a z-index of it’s own on there, but then it has that positioning value and z-index, which might not be something you want or have side effects. The beauty of isolation is that you get the stack context with zero side effects. It just does that one thing.
Anyway, I masticated this a while back so I thought I’d blog it like a responsible internet citizen. Video demo of ensuring a quote decoration doesn’t disappear but goes behind everything else in that element. Useful!
Pen:
Leave a Reply