焦点按钮轮廓出现在兄弟按钮后面并向左浮动时的解决方法 [英] Workaround to the button outline on focus appearing behind the sibling button with float left

问题描述

给出此HTML：

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

此样式表：

 按钮{
边框：1px实线#EEE; 
浮动：左； 
} 
 
 button：focus {
轮廓：细虚线； 
} 
  

SSCCE：

注意指定 position：relative 而没有 top ， bottom ， left 或 right 属性通常不会移动元素并破坏布局，但是绝对将其从自然流中删除，并将其置于其他元素的范围之外，因此请谨慎使用。

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:

解决方案

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.

这篇关于焦点按钮轮廓出现在兄弟按钮后面并向左浮动时的解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！