floatCSSのプロパティを使用して配置された2行2列の画像グリッドがあります。画像にカーソルを合わせると、不透明度を0から1に切り替えて、各画像に小さなオーバーレイを表示したいと思います。一番上の行の画像にカーソルを合わせると、コードがうまく機能します。しかし、下の行の画像にカーソルを合わせると、アクティブ化されたオーバーレイはまだ上の行のものです。
ポジショニングの問題だと思います。
私のコードはここにあります：http：//jsfiddle.net/zZXZX/27/
PS：デザインの小さな欠点は気にしないでください。
.movie{
display:block;
float:left;
position:relative;
}
position:relative.movieクラスに追加する必要があります。position:absolute静的な位置ではない最も近い親アイテムを探します。
相対的な親を指定せずに、オーバーレイを絶対位置に配置しています。
http://jsfiddle.net/tomprogramming/zZXZX/28/
position:absoluteposition:staticオーバーレイを、ドキュメントルートではない、または見つからない場合は最初の親を基準にしたオフセットで配置します。
に追加position:relativeし.movieます。