CSS ie7 z-index

Question

我正在尝试生成这样的图形：

但我明白了：

CSS：

 #green { height: 500px; width: 500px; background-color: green; position:absolute;z-index:13; }
    #red { height: 300px; width: 300px; background-color: red; position:absolute; z-index:17; }
    #blue { height: 400px; width: 400px; background-color: blue; position:absolute; z-index:15;}

HTML：

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

主要问题是html代码需要像我上面指定的那样确定。请告诉我实现此功能所需的CSS代码（必须与IE7 +兼容）。或者JS可能对此有所帮助？我会很高兴任何建议。

Answer 1

z-index CSS属性仅与DOM层次结构中同一级别的元素相关。因此，放在红色上的z-index值是无关紧要的。只有蓝色和绿色的z指数。由于蓝色的z指数高于绿色，因此它显示在顶部。虽然反直觉，但它符合规范。

我不是有一个修复，不涉及修改HTML，无论是静态还是在运行时使用JavaScript。例如。如果红色出现在与蓝色和绿色相同的水平，它应该可以正常工作。

Answer 2

这比你想要的更容易。如果将每个div嵌套在另一个div中，则布局会自行处理。有JSFiddle here代码如下：

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

---

#green
{
    width: 400px;
    height: 400px;
    background: green;
    position: absolute;
}

#green #blue
{
    width: 300px;
    height: 300px;
    background: blue;
}

#green #blue #red
{
    width: 200px;
    height: 200px;
    background: red;
}

Answer 3

删除绿色div might do the trick的z-index规则。问题是它在IE7中不起作用。然而，IE8 +和其他人应该没问题。

Answer 4

您要做的只是从position: absolute移除#green（此{div上的z-index也变得不必要了）。适用于所有浏览器，包括IE6和IE7。

小提琴：http://jsfiddle.net/PD83G/。