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

我有两个嵌套的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> 

为孩子设置一个负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> 

幸运的是有一个解决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> 

其中一些答案确实有效,但是设置的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/

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

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

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

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

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

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

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

样式:

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

身体:

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