Div / CSS / ZIndex - how to overlay photos?

Question

I have 5 shots and I overlap these 5.

I read a lot about how CSS / Div overlaps, but I didn't get it at all.

I have a standard width 500 container as a content filler.

In this div, I will have 5 paintings that overlap each other.

I try all the "position:", but nothing fills what I want.

Answer 1

<div style="position:relative">
  <img src="1.png" style="position:absolute; top:0px; left:10px; z-index:0"/>
  <img src="1.png" style="position:absolute; top:0px; left:20px; z-index:1"/>
  <img src="1.png" style="position:absolute; top:0px; left:30px; z-index:2"/>
  <img src="1.png" style="position:absolute; top:0px; left:40px; z-index:3"/>
  <img src="1.png" style="position:absolute; top:0px; left:50px; z-index:4"/>
</div>

try it

Answer 2

Here is a complete example with html + Css

http://www.jsfiddle.net/rPAPz/

(This is basically the same as @Dobiatowski, but with added transparency to show the actual overlap.)