위치 상대 div 위치 이동 약간

Question

Here은 (나를 위해) 문제를 완벽하게 보여주는 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

할 수있는 올바른 방법이 demo

Full Demo

같다

설명 : 당신이해야했습니다 것은 img에 대한 position: relative;를 사용하여보다 #imgOver에 대한 position: absolute;를 사용하여 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; 
}