CSS堆叠顺序，z-index

Question

我怎么也想不出在不改变html结构的情况下如何让顶部出现红色

http://jsfiddle.net/GSBtG/

我如何得到顶部的红色?我已经标注了z-index值和位置的每一个组合，等等。

HTML:

<div id="red">
    <div id="green"></div>
</div>

CSS:

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    z-index: 10;
    position: relative;
}
#green {
    background: green;
    width: 290px;
    z-index: -10
}

Answer 1

将Z-Index从父元素中移除，并赋予两个元素相同的position:规则。

概念证明:http://jsfiddle.net/GSBtG/2/#update

Answer 2

设置子节点z-index为负，父节点z-index为负。

#parent {
    position: relative;
}
#child {
    position: relative;
    z-index: -10;
}

jsFiddle

源