CSS ie7 z
我试图生成这样的图形：
但我得到：
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会为此提供帮助？ 我会很乐意提供任何建议。
z-index CSS属性仅与DOM层次结构中存在于相同级别的元素相关。 因此，放置在红色上的z-index值是无关紧要的。 只有蓝色和绿色的z-index问题。 由于蓝色的Z指数高于绿色，因此它出现在顶部。 虽然违反直觉，但符合规范。
我没有修复这个问题，它不涉及修改HTML，无论是静态还是在运行时使用JavaScript。 例如，如果红色出现在与蓝色和绿色相同的级别，它应该可以正常工作。
这比你想象的要容易得多。 如果将每个div嵌套在另一个div中，则布局会自行处理。 这里有一个JSFiddle，代码如下：
<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;
}
去除绿色div的z-index规则可能会起作用。 问题是它不会在IE7中工作。 但IE8 +和其他应该没问题。
上一篇: CSS ie7 z