鼠標懸停浮動元素上並沒有火的時候，下一個元素是在相對位置

Question

我有一個問題，即是不是一個浮動元素上觸發，因爲下一個元素具有position: relative;鼠標懸停事件！

這裏是一個演示：http://jsfiddle.net/7UjQZ/

事實上，與position: relative元素似乎走了過來浮動元素，趕上鼠標懸停事件。當我刪除position: relative時，不再有問題！除非我絕對必須這個屬性，因爲在我最初的問題中，我有寬度絕對位置內的元素。

你有什麼想法嗎？一個辦法？

謝謝！

Answer 1

Working DEMO

這是一個z-index問題：

更新你的CSS具有較高的z-index爲.float：

.float 
{ 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: yellowgreen; 
    position:relative; 
    z-index:10; 
} 

Answer 2

我建議你閱讀relative positioning。

看看我們在代碼中使用相對位置時會發生什麼。我添加了更好的體驗背景。

.text { 
    background-color: #ebebeb; 
    position: relative; 
} 

http://jsfiddle.net/7UjQZ/2/