很抱歉这样一个“假”问题,但我真的找不到解决方案。
我用图形说明了情况:
在container
内,有两个兄弟姐妹(RED <div>
和BLUE <div>
)。 两者都有position: absolute;
RED 有z-index:1;
BLUE 有z-index:2;
RED 的孩子(绿色)有position:relative;
和z-index:99;
谢谢!
更新1。这是小提琴
答案 0 :(得分:3)
解决这个问题的关键在于sudhAnsu63链接的文章:
可以通过以下三种方式之一在元素上形成新的堆叠上下文:
当元素是文档的根元素(元素)
时当元素的位置值不是static而且z-index值不是auto
时当元素的不透明度值小于1
时
但解释只是相反。要在红色和绿色之间设置蓝色元素,红色元素无法生成堆叠上下文。由于第二条规则,它正在生成堆叠上下文;它的位置绝对是一个不同于auto的z-index。
所以,解决方案是:
#red{
z-index:auto;
}
答案 1 :(得分:1)
这不起作用,因为Red的z-index低于蓝色。 z-index仅适用于具有公共根元素的元素。
中的堆叠上下文部分答案 2 :(得分:1)
这里的蓝色div和Red div是容器div的直接子节点。 z-Index不会完全正常工作。
尝试将蓝色div的不透明度更改为0.99;
.bluediv {
opacity: .99;
}
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
答案 3 :(得分:0)
是的,这是不可能的,因为子元素继承了父元素的z-index。因此,将绿色div的z指数设为99是没有意义的,因为它的z-index仅在父级(红色div)内有效。 因此,如果你给一个容器一个特定的z-index让我们说20,那么这个容器里面的z-indexing从0再次开始。这是一件好事,因为否则我们必须给所有孩子一个z-index为最小21或者他们赢了不可见。 网页上的第一个容器是body标签,您可以使用从第0层(z-index 0)开始的z-index属性堆叠其所有子容器。就像body标签一样,每个孩子都有自己的z-index“系统”,与DOM中的高级元素无关。因此,z-indexing从具有自己定义的z-index的父容器内的0开始。