为什么z-index不在这里工作 [英] Why isn't z-index working here
本文介绍了为什么z-index不在这里工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图使图像重叠，我应该看到所有的第一个图像的Adobe，但e被第二个阻止，第三个。
>
I使用不同的z-index使最左边的图像显示在堆栈的顶部，但它不工作在这里。使用带负值的margin-left是错误的吗？
< html>
< head>
< title>演示< / 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 =Asrc ='adobe.gif'/>< / li>
< li>< img class =Bsrc ='adobe.gif'/>< / li>
< li>< img class =Csrc ='adobe.gif'/>< / li>
< / ul>
< / body>
< / html>
解决方案
您需要添加此规则
li img {
position：relative;
}
由于z-index的定义仅适用于定位的元素。 / p>
I'm trying to make images overlap , I should see all of 'Adobe' of the first image , but e was blocked by the second one , so does the third.
I use diferent z-index to make the left-most image shows at top of stack , but it doesn't work here. Is it wrong to use margin-left with negative value ?
<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>
解决方案
You need to add this rule
li img {
position:relative;
}
As the definition of z-index says it only works on positioned elements.
这篇关于为什么z-index不在这里工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
