What’s the standard way to render an element’s outline above its siblings in CSS?

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).

Source: https://mobile.twitter.com/WebPlatformNews/status/1106577402799505414

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.

Fore example, 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:

https://groups.google.com/a/chromium.org/d/msg/blink-dev/WoLwgoPB-GE/C2ZRNt-4h3wJ

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.

Screen Shot 2019-03-30 at 11.48.11 PM.png1142×548 43.6 KB

yeah, thats what I’m doing.

box-shadow: 0 0 0 .1875rem rgba(blue, .5);
outline: 0;

https://codepen.io/chrisopedia/pen/ZZExBz

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.