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/。