为什么z-index不在这里工作
我试图让图像重叠,我应该看到第一张图像的所有'Adobe',但是e被第二张图像阻挡了,第三张也是如此.
我使用不同的z-index使最左边的图像显示在堆栈的顶部,但它在这里不起作用.使用margin-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>
小智 9
您需要添加此规则:
li img {
position: relative;
}
或者另一个值position,因为它的定义z-index只适用于定位元素.
- 也就是说,`position:absolute`,`position:relative`,或`position:fixed`. (2认同)