html - CSS3 z-index 问题

Question

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

我已经用图表说明了这种情况:

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

RED 有 z-index:1; 蓝色有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 索引与 auto 不同。

所以，解决办法是:

#red{
    z-index:auto;
}

demo