html - 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

资源