div-hover의 오버레이 위치

Question

CSS의 float 속성을 사용하여 배열 된 2 x 2 격자의 이미지가 있습니다. 호버 위에서 불투명도를 0에서 1로 전환하여 각 이미지 위에 마우스 오버시 작은 오버레이를 표시하려고합니다. 맨 위 줄에 이미지를 올리면 내 코드가 훌륭하게 작동합니다. 그러나 하단 행의 이미지 위로 마우스를 가져 가면 여전히 활성화 된 오버레이가 상단 행의 이미지입니다.

위치 지정 문제가 있다고 생각합니다.

내 코드는 여기에 있습니다 : http://jsfiddle.net/zZXZX/27/

PS : 디자인과 가벼운 오류 마음을 해달라고하십시오.

Answer 1

상대 부모를 지정하지 않고 오버레이를 절대 위치에 배치합니다.

http://jsfiddle.net/tomprogramming/zZXZX/28/

position:absolute 위치 position:static이 아니거나 첫 번째 부모를 기준으로 오프셋 (offset)를 오버레이 것도 발견되지 않으면, 문서 루트.

Answer 2

position:relative to .movie.

Answer 3

.movie{ 
    display:block; 
    float:left; 
    position:relative; 
} 

.movie 클래스에 position:relative을 추가해야합니다. position:absolute은 정적 위치가 아닌 가장 가까운 상위 항목을 찾습니다.