logo标签列表

嵌套的DIV和z-index

htmlcss
3

我试图通过在div上使用z-index来创建这种重叠效果：

嵌套的DIV和z-index

但是，如果我将父元素的z-index设置为比“非子元素”的z-index小的数字，则子元素也会与其父元素一起保持在后面。 我想知道是否有任何方法可以解决这个问题。

你是想做类似这样的东西吗？http://codepen.io/mudittuli/full/rEgkw - undefined
2个回答
5
谢谢！这正是我想要的。我猜问题在于“绝对值”。 - Mia
那段代码做的事情比你想象的要多得多。我已经编辑了我的前一个答案，并提供了一个简单的示例，仅针对所提出的问题，请查看它。 - Tiago César Oliveira
@zettam，是的，父元素不应该有绝对定位。子元素和非子元素应该有。 - M T
1
这可能是正确的答案。但在stackoverflow上，我们应该将代码放在答案中，而不是放在外部网站上。 - donquixote
父级 z-index: 2 绝对没有任何作用，只会增加混乱。 - nightfox89
1

如果没有看到你的代码，很难判断，但我相信你正在使用一些DIV作为祖先元素；试着单独使用它们所有的部分。这个例子可以做到你想要的：

<!DOCTYPE html>
<html>
    <head>
        <title>Positioning test</title>
        <style>
            div { position: absolute; width: 100px; height: 100px; color: #fff; text-align: center; }

            #parent { z-index: 1; background-color: red; left: 100px; top: 20px; }
            #not-child { z-index: 2; background-color: green; left: 140px; top: 40px; }
            #child { z-index: 3; background-color: blue;  left: 70px; top: 60px; }
        </style>
    </head>
    <body>
        <div id="parent">Parent</div>
        <div id="not-child">Not-child</div>
        <div id="child">Child</div>
    </body>
</html>
从你的回答中我可以看出，“非子元素”仍然在顶部。我想要得到的结果就像图片一样（非子元素在中间）。 - Mia
只需使用适当的 z-index：1 用于 Parent，2 用于 Not-Child 和 3 用于 Child。我很担心看到你还没有弄清楚这一点。我会编辑我的帖子。 - Tiago César Oliveira
我已经尝试过了，但是我无法以那种方式使其工作。这就是为什么这个主题首先出现在这里的原因。 - Mia
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接