解決辦法對焦點的按鈕輪廓出現在用浮法同級按鈕留下

Question

鑑於此HTML：

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

而這個樣式表：

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

button:focus { 
    outline: thin dotted; 
} 

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

在下面如果您只關注第一個元素（點擊並「拖動」第一個按鈕以顯示邊框輪廓），則大綱保留在下一個元素的後面。

它發生在Firefox（邊緣）和IE10中。

我試圖用z-index來控制兩個元素的z位置，但沒有成功。我可能會錯過一些東西。
歌劇院處理它優雅，但Firefox和IE10拒絕這樣做......

1. 如何讓我的輪廓出現在相關元素的前面，而不是後面的下一個爲FF和IE10？
2. 在規範中是否提及此行爲或這是特定供應商？

截圖顯示在FF不希望的行爲：

Answer 1

z-index僅適用於一個position不是默認static。所以通過將其設置爲relative，您將達到您的效果。

這裏有一個的jsfiddle http://jsfiddle.net/DKpGA/2/

請注意，指定position:relative沒有top，bottom，left，或者right屬性通常不會將你的元素，破壞佈局，但是absolute從自然流動中刪除，並把它的外其他元素的範圍，所以要小心。