如何使用z-index使子元素高于父元素

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 {
    position: relative;
}

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

Answer 3

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

.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 4

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

Answer 5

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

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

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

Answer 6

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

z-index: unset;