I want my div's to overlap - html

Question

I'm trying to overlap some images, but whatever combination of positions I try, it doesn't seem to work.
this is the HTML
<li class="six">
<img class="06a" src="../inhouds/images/page06a.png">
<img class="06b" src="../inhouds/images/page06b.png">
<img class="06c" src="../inhouds/images/page06c.png">
</li>
this is the CSS
.06a {
position:absolute;
z-index: 250;
}
.06b {
position:absolute;
z-index: 260;
margin-left: 50px;
}
.06c {
position:absolute;
z-index: 270;
margin-left: 100px;
}
I hope someone can help me out!

Answer 1

Are you looking for this kind of overlap DEMO
Change markup to better semantic(alphabets for class,not numbers) :
<li class="six">
<img class="a" src="http://www.jonathanjeter.com/images/Square_200x200.png" />
<img class="b" src="http://www.jonathanjeter.com/images/Square_200x200.png" />
<img class="c" src="http://www.jonathanjeter.com/images/Square_200x200.png" />
</li>
CSS i did
li {
list-style:none
}

Answer 2

Click here for a working Demo
Do not start classnames with numbers. Use left instead of margin-left as you are using absolute positioning.
HTML
<img class="a06a" src="http://i.imgur.com/JMCU8.jpg">
<img class="a06b" src="http://i.imgur.com/UjdNhhO.jpg">
<img class="a06c" src="http://i.imgur.com/KOfaU.jpg">
CSS
.a06a {
position:absolute;
z-index: 250;
}
.a06b {
position:absolute;
z-index: 260;
left: 50px;
}
.a06c {
position:absolute;
z-index: 270;
left: 100px;
}

Answer 3

Here is a nice and clean example to understand how it works
CSS
.box1, .box2, .box3 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
}
.box2 {
background: green;
left: 50px;
}
.box3 {
background: blue;
left: 100px;
}
.container {
position: relative;
}
HTML
<div class="conatiner">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
For something that you position absolute you should always have top and left defined.