CSS3 z-index问题

Question

很抱歉这样一个“假”问题，但我真的找不到解决方案。

我用图形说明了情况：

在container内，有两个兄弟姐妹（RED <div>和BLUE <div>）。 两者都有position: absolute;

RED 有z-index:1; BLUE 有z-index:2;

RED 的孩子（绿色）有position:relative;和z-index:99;

我想让GREEN高于 BLUE

谢谢！

更新1。这是小提琴

http://jsfiddle.net/yn9z7/

Answer 1

解决这个问题的关键在于sudhAnsu63链接的文章：

  

可以通过以下三种方式之一在元素上形成新的堆叠上下文：

     

当元素是文档的根元素（元素）

时      

当元素的位置值不是static而且z-index值不是auto

时      

当元素的不透明度值小于1

时

但解释只是相反。要在红色和绿色之间设置蓝色元素，红色元素无法生成堆叠上下文。由于第二条规则，它正在生成堆叠上下文;它的位置绝对是一个不同于auto的z-index。

所以，解决方案是：

#red{
    z-index:auto;
}

demo

Answer 2

这不起作用，因为Red的z-index低于蓝色。 z-index仅适用于具有公共根元素的元素。

查看this article

中的堆叠上下文部分

Answer 3

这里的蓝色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/

Answer 4

是的，这是不可能的，因为子元素继承了父元素的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开始。