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 z-index ，在父z-index上刪除z-index 。

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

的jsfiddle

資源