Я хочу, чтобы мой div был перекрыт.

Question

Я пытаюсь совместить некоторые изображения, но любая комбинация позиций, которые я пытаюсь сделать, кажется, не работает.

это 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> 

Это 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; 
} 

Я надеюсь, что кто-то может помочь мне!

Answer 1

Вы ищете для этого вида перекрытия DEMO

Изменения разметки для улучшения семантических (алфавитов для класса, а не число):

<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 я сделал

li { 
    list-style:none 
} 

Answer 2

Click here for a working Demo

Не начинайте имена классов с номерами. Используйте left вместо margin-left, поскольку вы используете абсолютное позиционирование.

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 хороший и чистый пример, чтобы понять, как это работает

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> 

За то, что вы позиционируете абсолютное вы всегда должны иметь top и left определены.