Question

我不能为我的生活弄清楚如何在不改变html结构的情况下获得红色。

如何获得红色？我已经将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

从parenting元素中删除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

Source

css堆叠顺序，z-index

2 个答案: