Search code examples
htmlcssfirefoxcross-browserweb-frontend

Workaround to the button outline on focus appearing behind the sibling button with float left

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

Solution

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