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

#1

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.

1 Like

#2

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.

3 Likes

#3

Wow, what a hidden gem! :exploding_head: 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.

0 Likes

#4

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.

0 Likes

#5

Do you mean an inset box shadow? Otherwise, it still appears beneath the next the next sibling from what I see.

0 Likes

#6

yeah, thats what I’m doing.

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

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

0 Likes

#7

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.

0 Likes

#8

yeah, sorry, I guess thats the trick.

0 Likes