Using CSS to display image over image: Position tags query

Question

I have created a code to display an image over an image. heres the code:

<style type="text/css"> 
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; } 
</style>

<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">

Now i added this to my blogger site in a post. The images seems to be positioned with the screen. These images appeared one over another, but even after adding the code where i want to make them appear, they were positioned at extreme left corner of the screen. I want to make them appear below some texts in my post. I think theres some prob in the "absolute" value of position tag. But I don't know how to overcome this.

Answer 1

Nest them inside a relative element:

<style type="text/css"> 
.container { position:relative; }
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; } 
</style>

<div class="container">
<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">
</div>

http://jsfiddle.net/nUPsh/1/

---

This article explains the CSS position property quite well:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/