Question

我正在尝试使图像重叠，我应该看到第一张图像的所有'Adobe'，但是e被第二张图像阻挡了，第三张也是如此。

enter image description here

我使用不同的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>

Answer 1

您需要添加此规则：

li img {
    position: relative;
}

或position的其他值，因为z-index的定义表明它仅适用于定位元素。

Answer 2

JSBIN：http://jsbin.com/itepeg

像这样调整你的代码：

<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：http://jsbin.com/itepeg

希望这有帮助。

Answer 3

看起来标签的组合在这里是你的问题 - 在尝试强制执行z-index时逐渐保留边缘并不理想。你想让它们重叠还是一个出现在另一个之上？

如果一个在另一个之上，那么我很想建议你的UL / LI组合没有必要，只是有一个：

<div class="image_container">
  <img class="A">
  <img class="B">
  <img class="C">
</div>

并拥有CSS：

.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％肯定你的重叠意味着什么 - 你可能想要大致实现你没有重叠的东西？

为什么z-index不在这里工作

3 个答案: