如何使子元素的z索引高于父元素? [英] How to make child element higher z-index than parent?

问题描述

假设我有以下代码:

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

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

此jsFiddle: http://jsfiddle.net/ZjXMR/

This jsFiddle: http://jsfiddle.net/ZjXMR/

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

Now, I need to have<div class="child"> in above of <div class="wholePage"> but in the jsFiddle you can see that the child element rendered before <div class="wholePage">.

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

If you remove the parent class position or z-index, everything works fine. This is the correct behavior that I need: http://jsfiddle.net/ZjXMR/1/

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

How can I do that with z-index and without removing anything from page?

推荐答案

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

This is impossible as a child's z-index is set to the same stacking index as its parent.

您已经通过从父级移除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.

这篇关于如何使子元素的z索引高于父元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！