html - CSS3 z-index 问题

Question

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

我已经用图形说明了情况:

在container里面，有两个 sibling (RED <div> 和BLUE <div>)。 两者都有position: absolute;

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

RED 的 child (GREEN)有 position:relative;和 z-index:99;

我想让绿色比蓝色

谢谢!

更新 1. 这是 fiddle

http://jsfiddle.net/yn9z7/

Answer 1

解决这个问题的关键在 sudhAnsu63 链接的文章中:

New stacking contexts can be formed on an element in one of three ways:

When an element is the root element of a document (the element)

When an element has a position value other than static and a z-index value other than auto

When an element has an opacity value less than 1

但解释正好相反。将蓝色元素设置在红色和绿色之间，红色元素不能生成堆叠上下文。由于第二条规则，它正在生成一个堆栈上下文；它具有绝对位置和不同于自动的 z-index。

所以，解决方案是:

#red{
    z-index:auto;
}

demo