我想我的div重叠

我想重叠一些图像，但无论我尝试的位置组合，它似乎并没有工作。我想我的div重叠

这是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; 
}

我希望有人能帮助我！

来源

2013-12-23 user3095570

1）用一个字母开始你的id或class 2）把它们从li中取出 – mplungjan

从这里开始www.jsfiddle.net –

如果你使用position：absolute，为什么不使用left和top而不是傻利润？ – MightyPork

您是否在寻找这种重叠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 
}

来源

2013-12-23 12:04:28 NoobEditor

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; 
}

来源

2013-12-23 12:07:31

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定义的东西。

来源

2013-12-23 12:09:11

我想我的div重叠

回答

相关问题