css - 位置相对 div 稍微移动位置

Question

这是一个 JSFiddle，它（对我来说）完美地显示了这个问题。

但是，我有几个 div 可以动态加载其中的图像，然后我在顶部有一个透明的 div，它会有一些选项，但是当后面的图像完全加载时，顶部 div 的位置会发生有趣的变化。

关于如何防止这种情况的任何想法？

以下是相关代码： HTML：

<div id="img">
<img src="http://tbremer.com/images/portfolio/Concert/_MG_6961.jpg" height="200">                        <div id="imgOver">test</div>
</div>

<div id="img">
<img src="http://tbremer.com/images/portfolio/Concert/_MG_6964.jpg" height="200">                        <div id="imgOver">test</div>
</div>

<div id="img">
&nbsp;<img src="http://tbremer.com/images/portfolio/Concert/_MG_7063.jpg" width="200">&nbsp;
<div id="imgOver">test</div>
</div>​

CSS：

#img{
    float: left;
    margin: 5px;
    padding: 0;

    width: 200px;
    height: 200px;

    text-align: center;
    font-size: 1em;

    background-color: rgb(232, 227, 223);
    border: 1px solid #000;
}

#imgOver{
    position: relative;
    top: -200px;

    width: 200px;
    height: 200px;

    background-color: rgba(0,0,0,.7);    
    color: #fff;
}
​

Answer 1

正确的做法是这样的演示

完整演示

解释：你要做的是使用position: relative;forimg和而不是使用position: absolute;for#imgOver和 removetop: -200px

HTML

<div id="img">                       
    <img src="http://tbremer.com/images/portfolio/Concert/_MG_6961.jpg" height="200">  
<div id="imgOver">test</div>     
</div>

CSS

#img{
    float: left;
    margin: 5px;
    padding: 0;
    width: 200px;
    height: 200px;
    text-align: center;
    font-size: 1em;
    position: relative;
    background-color: rgb(232, 227, 223);
    border: 1px solid #000;
}

#imgOver{
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(0,0,0,.7);    
    color: #fff;
}