106

假设我有这个代码：

<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类positionor z-index，一切正常。这是我需要的正确行为：http: //jsfiddle.net/ZjXMR/1/

我怎样才能做到这一点，z-index无论是否从页面中删除任何内容？

4

6 回答 6

91

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

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

于 2013-04-17T10:15:14.233 回答
16

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

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
于 2015-12-08T12:18:32.007 回答
8

要在不删除任何样式的情况下实现您想要的效果，您必须使“.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/

于 2013-04-17T10:22:58.347 回答
6

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

于 2013-04-17T11:53:51.333 回答
5

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

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

.child {
    position: relative;
    z-index: 101;
}
于 2015-04-24T07:12:36.507 回答
4

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

z-index: unset;
于 2018-10-30T20:55:30.867 回答