make 2 images overlap - html

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.

Answer 3

<style>
.imageoverlap{
position: absolute;
top:100px;
}
</style>
...
<div class='imageoverlap'>
image1
</div>
<div class='imageoverlap'>
image2
</div>
Try that :D

Answer 4

If you set position to absolute, you can control where you want to place it.
<style>
#overlay{position:absolute; top:0px;}
</style>
<div id="layer1"><img src="img1.png"></div>
<div id="overlay"><img src="overlay_image.png"></div>
Now you need to position #overlay where you want it, by setting top and left positions, i.e., top:0px, left:300px;