I’ve shared the following CSS tip on Twitter:
You can apply
transform: rotate(0) to an element’s
:focus state to ensure that the element’s focus outline isn’t concealed by adjacent elements (e.g., the next sibling).
This has lead to a discussion about the different ways to achieve this in CSS. I would like to know what the standard way is to do this in CSS.
position: relative seems “more standard” than
transform: rotate(0) (which is a hack) but we’re not offsetting the element, so it seems like a hack as well.
P.S. This question probably has an obvious answer but I am easily confused when it comes to CSS, so I need to ask.
MDN has a list of things that will trigger a new stacking context. Of those
isolation seems like the one most directly intended to create a new stacking context.
Wow, what a hidden gem! I’m pretty sure I haven’t read anything about this property in the last 4 or more years. The last (and only) mention of it that I’ve found is this intent-to-ship discussion from November 2014:
It seems to be related to compositing (something about combining shapes).
The only downside is that it’s not supported in IE and Edge.
Is there any reason you’d have to use
outline? I’ve been zeroing that out in my own projects and using
box-shadow instead and it doesn’t suffer from the same issues as far as I’ve tested.
Do you mean an
inset box shadow? Otherwise, it still appears beneath the next the next sibling from what I see.
yeah, thats what I’m doing.
box-shadow: 0 0 0 .1875rem rgba(blue, .5);
Aha. The box shadow appears above the next sibling because you’re applying
z-index: 100 in the focus state, which establishes a new stacking context.
yeah, sorry, I guess thats the trick.