如何使子元素高于具有z-index的父元素 [英] How to make child element upper than parent with z-index

问题描述

假设我有这个代码：

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

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

现在，我需要< div class =child> c> c>在< div class =wholePage> 的上面，但在jsFiddle中你可以看到子元素< div class =wholePage> 。

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

如何用 z-index 这样做而不从页面中删除任何内容？

这是不可能的，因为 z-index 总是从父类继承

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

Suppose I have this code:

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

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

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

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

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/

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

解决方案

This is impossible as z-index is always inherited from the parent (if it is set).

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-index的父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！