다음 요소가 상대 위치에있을 때 float 요소의 mouseover가 실행되지 않았습니다.

Question

다음 요소에 position: relative;이 있기 때문에 플로팅 요소에서 트리거되지 않은 mouseover 이벤트에 문제가 있습니다! http://jsfiddle.net/7UjQZ/

실제로, position: relative를 가진 요소가 부동 요소를 통해 이동하고 마우스 오버 이벤트를 잡을 것 : 여기

는 데모입니다. position: relative을 제거하면 더 이상 문제가 없습니다. 내 첫 번째 문제에서 너비가 절대 위치 내에서 요소가 있기 때문에 절대적 으로이 속성을 가지고하지 않는 한.

의견이 있으십니까? 해결책?

감사합니다.

Answer 1

Working DEMO

그것은 z-index 문제입니다 :

업데이트는 .float에 대한 z-index 높은 가지고 CSS : 나는 약 relative positioning을 읽어 보시기 바랍니다

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

Answer 2

.

코드에서 상대 위치를 사용하면 어떻게되는지보십시오. 더 나은 경험을위한 배경을 추가했습니다.

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

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