如何让父元素出现在子元素上方

我有两个嵌套的CSS元素。 我需要让父元素位于子元素的顶部，即z轴上方。 只是设置z-index是不够的。

我无法为子设置一个负Z-index，它会将其设置在实际页面上的页面容器下方。 这是唯一的方法吗？

.parent { position: relative; width: 750px; height: 7150px; background: red; border: solid 1px #000; z-index: 1; } .child { position: absolute; background-color: blue; z-index: 0; color: white; top: 0; } .wrapper { position: relative; background: green; z-index: 10; } 

 <div class="wrapper"> <div class="parent"> parent parent <div class="child"> child child child </div> </div> </div> 

Answer 1

为孩子设置一个负z-index ，并删除父母上的一个。

 .parent { position: relative; width: 350px; height: 150px; background: red; border: solid 1px #000; } .parent2 { position: relative; width: 350px; height: 40px; background: red; border: solid 1px #000; } .child { position: relative; background-color: blue; height: 200px; } .wrapper { position: relative; background: green; height: 350px; } 

 <div class="wrapper"> <div class="parent">parent 1 parent 1 <div class="child">child child child</div> </div> <div class="parent2">parent 2 parent 2 </div> </div> 

Answer 2

幸运的是有一个解决scheme。 您必须为父级添加一个包装器，并将此包装器的z-index更改为10，并将z-index子级设置为-1：

 .parent { position: relative; width: 750px; height: 7150px; background: red; border: solid 1px #000; z-index: initial; } .child { position: relative; background-color: blue; z-index: -1; color: white; } .wrapper { position: relative; background: green; z-index: 10; } 

 <div class="wrapper"> <div class="parent">parent parent <div class="child">child child child</div> </div> </div> 

Answer 3

其中一些答案确实有效，但是设置的position: absolute; 和z-index: 10; 似乎很强大，只是为了达到所需的效果。 我发现以下是所有必要的，但不幸的是，我还没有能够进一步减less它。

HTML：

 <div class="wrapper"> <div class="parent"> <div class="child"> ... </div> </div> </div> 

CSS：

 .wrapper { position: relative; z-index: 0; } .child { position: relative; z-index: -1; } 

我使用这种技术来实现图像链接的边框hover效果。 这里有更多的代码，但它使用上面的概念来显示图像顶部的边框。

http://jsfiddle.net/g7nP5/

Answer 4

破解它。 基本上，发生的事情是，当你将z-index设置为负数时，它实际上忽略了父元素，不pipe它是否被定位，并且位于下一个定位元素的后面，在你的情况下是你的主容器。 因此，你必须把你的父元素放在另一个定位的div中，而你的子div将会坐在它的后面。

为了让我的代码能够工作，对于我来说，解决这个问题是一个救命的工具，因为我的父元素无法定位。

我发现这一切都非常有用，以达到这里指示的效果： 只使用CSS，将divhover在<a>上

Answer 5

既然你的div是position:absolute ，他们就位置而言并不是真正的嵌套。 在你的jsbin页面上，我把HTML中div的顺序转换为：

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

红色的盒子覆盖了蓝色的盒子，我想这就是你要找的东西。

Answer 6

您将需要使用position:relative或position:absolute来同时使用父z-index和子z-index 。

Answer 7

样式：

 .parent{ overflow:hidden; width:100px; } .child{ width:200px; } 

身体：

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