html – z-index和堆叠;从堆叠上下文中删除子项

概述我正在尝试调整某些元素的堆叠顺序;这是一个 SSCCE. 鉴于此HTML代码段： <div id="block1"> <div>Lorem ipsum dolor.</div> <div id="widget"> <div>Widgety goodness!</div> </div></div><div id="block2"> <div>Lor @H_419_6@ 我正在尝试调整某些元素的堆叠顺序;这是一个 SSCCE.

鉴于此HTML代码段：

<div ID="block1">    <div>Lorem ipsum dolor.</div>    <div ID="Widget">        <div>Widgety goodness!</div>    </div></div><div ID="block2">    <div>Lorem ipsum dolor.</div></div><div ID="block3">    <div>Lorem ipsum dolor.</div></div>

我试图在#block2之上显示#Widget;使用以下CSS,您将看到在不更改节点树中#Widget的位置的情况下会出现问题.

#block1,#block2,#block3 {    position: relative;    min-height: 50px;    wIDth: 100%;}#block1,#block3 {    background-color: #abc;    color: #123;    z-index: 1;}#block2 {    background-color: #def;    color: #456;    z-index: 2;}#Widget {    background-color: #f00;    position: absolute;    z-index: 999;    left: 200px;    top: 40px;}

正如你在小提琴中看到的那样,#Widget被#block2部分重叠;这是完全合理的,因为父级#block1在堆叠顺序中的兄弟姐妹之间较低.

显而易见的答案是：让#Widget成为#block2的孩子,但不幸的是,这不是解决方案.另外,#blockN元素不能修改它们的相对z-index值;块1和块3必须小于2.(我的意思是计算值可能不同,但#block2总是大于它的兄弟姐妹).原因是盒阴影分层.

是否有任何合理的(读取：跨浏览器,ie7)方式从它的堆叠上下文中删除#Widget,同时保留它的位置,坐标位置,尺寸等？

使用固定定位可以根据需要将其移除,但是它也可以获得所有固定的视觉属性(这使得它不是解决方案)

我估计这可能是以迂回的方式回答的,但我没有找到它.道歉;看来我可能在我的帖子中遗漏了一些无关紧要但关键的细节.我想我现在已经把它们全部覆盖了.

解决方法 您的规则并不真正适用于您希望它们应用于的元素.您需要在要定位的元素上显式设置z-index,在这种情况下,该元素是block2的div子元素.只需修改第一个选择器：

#block1,#block3 {

至

#block1,#block2 div,#block3 {

您的堆叠订单已更正.您的z-index规则正在应用于父级,而孩子们继续使用默认的auto.在您的情况下,通过设置#block2 div上的位置,您可以让小部件位于block2子div的顶部.

jsFiddle example

总结

以上是内存溢出为你收集整理的html – z-index和堆叠;从堆叠上下文中删除子项全部内容，希望文章能够帮你解决html – z-index和堆叠;从堆叠上下文中删除子项所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。