Div / CSS / ZIndex - how to overlap pictures?

I have 5 pictures, and I will overlap these 5.

I read a lot of HowTo CSS / Div and overlapping, but I didn't get it at all.

I have a normal 500 width div container as "content" filler.

开发者_开发百科Into this div, I will have 5 pictures that are overlapping each other.

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

---

<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 this

---

Here is a complete example with html + Css

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

(it is basically the same as @Dobiatowski's answer but with added transparency to showcase the actual overlap..)