Question

Here is a JSFiddle that (for me) shows the problem perfectly.

But, I have several divs that load dynamically with images within them, then I have a transparent div over the top that will have some options, however the top div’s location shifts funny when the image behind fully loads.

ANy idea on how to prevent this?

Here is the relevant code:
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

The correct way to do is like this demo

Full Demo

Explanation :
What you’ve to do is use position: relative; for img and than use position: absolute; for #imgOver and remove top: -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;
}