html - div-hover 上的覆盖位置

Question

float我有一个使用CSS 中的属性排列的 2×2 图像网格。当我将鼠标悬停在每个图像上时，我想通过在悬停时将其不透明度从 0 切换到 1 来在每个图像上显示一个小的叠加层。当我将图像悬停在第一行时，我的代码效果很好。但是当我将鼠标悬停在下排图像上时，激活的叠加层仍然是顶行中的那个。

我觉得是定位的问题。

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

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

score 2 · Accepted Answer

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

您需要添加position:relative到您的 .movie 类。position:absolute寻找它最近的不是静态位置的父项。

score 2 · Accepted Answer

您将覆盖定位在绝对位置，而不指定相对父级。

position:absolute使用相对于它的第一个父级 not 的偏移量来定位您的叠加层position:static，或者如果没有找到文档根目录。

score 1 · Accepted Answer

1

添加position:relative到.movie.

于 2013-01-02T16:09:46.660 回答

3 回答 3