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;して削除するimgよりも使用することposition: absolute;です#imgOvertop: -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;
}