div-hover上的叠加位置

Question

我在CSS中使用float属性排列了2 x 2的图像网格。 当我将鼠标悬停在每张图像上时，我希望通过在悬停时将其不透明度从0切换为1来显示每个图像的小叠加。当我将图像悬停在顶行时，我的代码效果很好。 但是当我将鼠标悬停在较低行图像上时，激活的叠加层仍然是顶行的叠加层。

我认为这是一个定位问题。

我的代码在这里：http://jsfiddle.net/zZXZX/27/

PS：请不要介意设计中的小故障。

Answer 1

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

您需要将position:relative添加到.movi​​e类中。 position:absolute查找非最接近的非静态位置的父项。

Answer 2

您将叠加层置于绝对位置，而不指定相对父级。

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

position:absolute将您的叠加层设置为相对于非position:static的第一个父级的偏移量，或者如果找不到，则为文档根目录。

Answer 3

将position:relative添加到.movie。