5

Given this HTML:

<div>
    <button>Test1</button>
    <button>Test2</button>
</div>

And this stylesheet:

button {
    border: 1px solid #EEE;
    float: left;
}

button:focus {
    outline: thin dotted;
}

SSCCE: http://jsfiddle.net/DKpGA/

In the following jsfiddle the outline stays behind the next element if you focus on the first one (click and "drag" the first button to show just the bordered outline).

It happens in Firefox (edge) and IE10.

I tried to use z-index to control the z position of both element without success. I may be missing something.
Opera handles it gracefully, but Firefox and IE10 refuses to do so...

  1. How do I make the outline to appear in front of the related element and not behind the next for FF and IE10?
  2. Is there any mention in the spec regarding this behavior or this is vendor specific?

Screenshot showing the undesired behavior in FF: undesired behavior

Fagner Brack
  • 2,365
  • 4
  • 33
  • 69
  • Opera's behavior regarding the outline property is unique: http://tinker.io/866cf. Its like the outline has a z-index that's well above the z-index of the element it belongs to. – cimmanon Apr 30 '13 at 00:21
  • duplicate of https://stackoverflow.com/q/28042170/1976323? – David Lechner Apr 05 '22 at 21:04
  • @DavidLechner stackoverflow.com/q/28042170/1976323 is a duplicate of this one, not the other way around because this one is older. This question is from 2013 and stackoverflow.com/q/28042170/1976323 is from 2015. – Fagner Brack Apr 06 '22 at 07:11

1 Answers1

1

z-index only works for a position that is not the default static. So by setting it to relative, you will achieve your effect.

Here's a JSFiddle http://jsfiddle.net/DKpGA/2/

Note that specifying position:relative without top,bottom,left, or right attributes will usually not move your element and ruin the layout, however absolute removes it from the natural flow and puts it outside of other element's scopes, so be careful with it.

casraf
  • 21,085
  • 9
  • 56
  • 91
  • Your fiddle is the same as mine, need to update the URL. But that worked though, I knew that I was missing something, thanks! – Fagner Brack Apr 29 '13 at 22:01
  • Sorry, I forgot to save my changes. I updated the answer for future reference – casraf Apr 29 '13 at 22:04
  • 1
    Maybe because it's 2020 and things have changed, but http://jsfiddle.net/DKpGA/2/ just shifts the problem from the first button to the second button. – Abdull Apr 30 '20 at 09:31
  • Here is the solution working *for this problem context*, but not in the general case: https://jsfiddle.net/zomjhpr2/ – Abdull Apr 30 '20 at 09:41
  • 1
    Problems become apparent with `overflow: hidden` containers: https://jsfiddle.net/Lf145p3n/ – Abdull Apr 30 '20 at 10:34
  • As @Abdull mentioned. The problem that `outline` property covers behind sibling element may be caused by `overflow: hidden` prop. I figured it out inside Angular Material tabs component during styling cuz on `:focus` I wanted the tab to be with `outline` prop. In this case I had to remove from element which where higher in order, the `overflow: hidden` prop and it fixed the problem. There was no need to set `position: relative` – zrowork Oct 27 '22 at 07:25