如何使子元素比父元素具有更高的 z 索引？

假设我有这样的代码:

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


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

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

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

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

如何做到这一点与 z-index和没有删除任何从页面？

163121 次浏览
小开
最佳答案

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

You have already solved the problem by removing the z-index from the parent, keep it like this or make the element a sibling instead of a child.

小开

要在不移除任何样式的情况下实现所需的内容，必须使’。父母的班级比。整页课程。

.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;
}

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

小开

给父 Z-index: -1或不透明度: 0.99

小开

在子元素中使用非静态位置和更大的 z 索引:

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


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

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

.parent {
position: relative;
}


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

尝试使用这个代码，它为我工作:

z-index: unset;

提交答案