IE7 CSS的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-index问题。由于蓝色的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 trickz-index规则。问题是它不会在IE7中工作。但IE8 +和其他应该没问题。

Answer 4

所有你需要做的是从#green删除position: absolute（z-index这个div也变得不必要了）。适用于所有浏览器，包括IE6和IE7。

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