html - CSS ie7 z 索引

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-index 很重要。由于蓝色的 z-index 高于绿色，因此它出现在顶部。虽然违反直觉，但它符合规范。

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