Using CSS to display image over image: Position tags query

css, html

Solution

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/

Problem

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.

Original source