Html 为什么z-index在这里不起作用
我试图使图像重叠,我应该看到第一个图像的所有“Adobe”,但第二个图像阻止了e,第三个图像也阻止了e 我使用不同的z索引使最左边的图像显示在堆栈顶部,但在这里不起作用。使用带负值的左边距是否错误Html 为什么z-index在这里不起作用,html,css,Html,Css,我试图使图像重叠,我应该看到第一个图像的所有“Adobe”,但第二个图像阻止了e,第三个图像也阻止了e 我使用不同的z索引使最左边的图像显示在堆栈顶部,但在这里不起作用。使用带负值的左边距是否错误 <html> <head> <title>Demo</title> <style> li { float: left;
<html>
<head>
<title>Demo</title>
<style>
li {
float: left;
display: inline;
margin-left: -20px;
}
.A {
z-index: 10;
}
.B {
z-index: 9;
margin-top: 3px;
}
.C {
margin-top: 6px;
z-index: 8;
}
</style>
</head>
<body>
<ul>
<li><img class="A" src='adobe.gif' /></li>
<li><img class="B" src='adobe.gif' /></li>
<li><img class="C" src='adobe.gif' /></li>
</ul>
</body>
</html>
您需要添加此规则:
li img {
position: relative;
}
或者位置的另一个值,正如z-index的定义所说,它只对定位元素有效。JSBIN:
按如下方式调整代码:
<html>
<head>
<style type="text/css">
.A
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.B
{
position:absolute;
left:40px;
top:10px;
z-index:-1;
}
.C
{
position:absolute;
left:80px;
top:20px;
z-index:-1;
}
</style>
</head>
<body>
<ul>
<li><img class="A" src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li>
<li><img class="B" src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li>
<li><img class="C" src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li>
</ul>
</body>
</html>
JSBIN:
希望这能有所帮助。看来标签的组合是您的问题-在尝试强制执行z索引时逐渐保留边距并不理想。您希望它们重叠还是一个叠在另一个上 如果一个在另一个之上,那么我很想建议您的UL/LI组合是不必要的,只是有一个:
<div class="image_container">
<img class="A">
<img class="B">
<img class="C">
</div>
因此:
.image_container {
position: relative;
width: <widest image width>;
height: <highest image height>;
}
.image_container img {
position: absolute;
}
.image_container img.A {
z-index: 10;
}
.image_container img.B {
z-index: 9;
}
etc.
我不是100%确定你所说的重叠是什么意思——也许你想大致实现你所没有的重叠?
.在您的示例中,您缺少一个结束语>。。。我怀疑这是真的,但它会抛出很多答案,比如我自己,位置:绝对,位置:相对,或位置:固定。只是像扑克牌一样重叠,部分是啊,那么@AlphaMale对你的任务的扩展应该可以做你想做的事情——使用相对绝对定位要比使用浮动容易得多,这并不是说浮动是错误的,只是大多数人“获得”相对绝对比你使用浮动的方式容易得多。在这种情况下,这似乎是最好的答案。