CSS3 z-index问题

Question

很抱歉遇到这样一个“虚拟”问题，但我确实找不到解决方案。

我以图形方式说明了这种情况：

container内部有两个同级（ RED <div>和BLUE <div> ）。 两者都有position: absolute;

RED的 z-index:1; 蓝色的 z-index:2;

RED的孩子（ GREEN ）的position:relative; 和z-index:99;

我想让绿色高于蓝色

谢谢！

更新1。这是小提琴

http://jsfiddle.net/yn9z7/

Answer 1

解决问题的关键在sudhAnsu63链接的文章中：

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

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

当元素的位置值不是静态的并且z索引值不是auto时

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

但是解释恰恰相反 。 要将蓝色元素设置在红色和绿色之间，红色不能生成堆叠上下文。 由于第二条规则，它正在生成堆栈上下文。 它的绝对位置z索引与自动索引不同。

因此，解决方案是：

#red{
    z-index:auto;
}

演示

Answer 2

由于红色的z-index值低于蓝色，因此此方法无效。 z-index仅适用于具有共同根元素的元素。

退房的堆叠内容部分这篇文章

Answer 3

在这里，蓝色div和红色div是容器div的直接子级。 z-Index不能完全正常工作。

尝试将blue 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-物业-A-全面，外观/

Answer 4

是的，这是不可能的，因为子元素继承了父元素的z-index。 因此将绿色div的z-index设为99是没有意义的，因为它的z-index仅在父级（red div）内部有效。 因此，如果您给某个容器指定一个z索引（假设为20），则该容器内的z索引会再次从0开始。这是一件好事，因为否则我们必须给所有子项赋予最小21的z索引，否则他们将不可见。 网页上的第一个容器是body标签，您可以使用从0层（z-index 0）开始的z-index属性堆叠其所有子级。 就像body标签一样，每个孩子都有与DOM中较高元素无关的自己的z-index“系统”。 因此，在具有自己定义的z-index的父容器内，z-indexing从0开始。