Question

I am making a website where by clicking on a next button, the browser requests a new image URL from the server and loads the image using jQuery. I want to show the loading image on top of the old image when the request happened (like Facebook).

HTML

<div1>
    <img id="rel" src="http://localhost/images/original.jpg" height="400" width="500"></img>
    <div2>
        <img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"></img>
    </div2>
</div1>

CSS

div1
{
    position:relative;
}

div2
{
    position:absolute;
    top:50%;
    left:50%;
}

When I try this in jsFiddle the image does not appear over the other image. I only know basic CSS. Forgive any blunders in the above code.

Answer 1

<div id="parentDiv">
   <img id="rel1" src="http://localhost/images/original.jpg" height="400" width="500" />
   <img id="rel2" src="http://localhost/images/loading.jpg" height="40" width="50" />
</div>

CSS:

#parentDiv
{
   position:relative;
}

#rel2
{
   position:absolute;
   top:50%;
   left:50%;
}

There was some errors with your code:

<img></img> should be <img />

You should not have two same ID rel

You must put both images in the same Parent Div, give it a position:relative; so that the second image is considered absolute to this Parent Div, not to the whole page.

Check this http://jsfiddle.net/Kfxha/

To Position the second image right at the center, you must make some math calculations.

top = ( rel1.height - rel2.height ) / 2 =  ( 400 - 40 ) / 2 = 180px
left = ( rel1.width - rel2.width ) / 2 = ( 500 - 50 ) / 2 = 225px