Question

假设我有这段代码：

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

这个jsFiddle：http://jsfiddle.net/ZjXMR/

现在，我需要在<div class="child">的上方<div class="wholePage">，但在jsFiddle中，您可以看到在<div class="wholePage">之前呈现的子元素。

如果您移除parent班级position或z-index，一切正常。这是我需要的正确行为：http://jsfiddle.net/ZjXMR/1/

如何使用z-index并且不从页面中删除任何内容？

Answer 1

这是不可能的，因为孩子的z-index被设置为与其父级相同的堆叠索引。

您已经通过从父级删除z-index来解决问题，保持这样或者使元素成为兄弟而不是孩子。

Answer 2

要在不删除任何样式的情况下实现所需，您必须使'.parent'类的z-index大于'.whole Page'类。

.parent {
    position: relative;
    z-index: 4; /*matters since it's sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

jsFiddle：http://jsfiddle.net/ZjXMR/2/

Answer 3

给父级z-index：-1，或不透明度：0.99

Answer 4

没有什么是不可能的。使用武力。

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

Answer 5

在子元素中使用非静态位置以及更大的z-index：

.parent {
    position: absolute
    z-index: 100;
}

.child {
    position: relative;
    z-index: 101;
}

Answer 6

尝试使用此代码，它对我有用：

z-index: unset;

如何让子元素比父元素更高的z-index？

6 个答案: