make 2 images overlap

Question

I am using JS to write HTML code where I need to display 2 images exactly overlapped.

The height and width of both are same. What CSS properties can I use to do this?

Answer 1

Position relative on the container, and absolute on the images:

All of the above answers are missing the fact that you need to position a parent element with something other than static, or else you will be positioning them absolute to the browser window, which I presume you do not wish to do.

position: absolute will give your position in the container of the closest parent with some sort of positioning. So we give the parent position:relative; without declaring top or bottom, this way it will be 0px off from where it would normally be (i.e. no change, but still has position declared).

<div id="container">
    <img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
    <img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
</div>

#container{
    position:relative;
}
#container img{
    position:absolute;
    top:0;
    left:0;
}
.hide:hover{
    opacity:0;   
}​

http://jsfiddle.net/BLbhJ/1/

Edit: Added your hide functionality

Answer 2

Play around with the css in this:

http://jsfiddle.net/zuZxD/

I used opacity to display the overlapping.