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。

我希望我的div重叠

3 个答案: