Question

我正在尝试使用div上的z-index创建这种类型的重叠：

Nested DIV's and z-index

但是，如果我将父级的z-index设置为小于“non-child”元素的z-index的数字，则子级也将保留在父级的后面。我想知道是否有办法克服这个问题..

Answer 1

你正试图这样做吗？

Answer 2

没有看到你的代码就很难分辨，但我相信你正在使用一些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>

嵌套DIV和z-index

2 个答案: