Internet Explorer 7中z索引問題

Question

我有一個測試用例here。

我想要實現的是，帶有綠色子元素的藍色父元素像紙夾一樣環繞紅色元素。正如你可以在所有現代瀏覽器中看到的那樣，這很好 - 但在IE7中，綠色元素保留在後臺。

有沒有解決方案，我怎麼能在IE7中實現這一點？

編輯：這是必不可少的，綠色元素仍然作爲藍色的一個子元素，因爲藍色元素將動畫，這也是綠色元素寬度的位置上生效。

Answer 1

將position:relative;添加到聲明z-index的CSS。它在大多數情況下工作。

你的情況，這將是

#middle-container { 
     width: 250px; 
     height: 300px; 
     background: red; 
     left: 100px; 
     top: 20px; 
     z-index: 2; 
     position: relative; /* added row to make z-index work */ 
     opacity: .9; 
    } 

    #container-behind { 
     width: 220px; 
     height: 110px; 
     padding-left: 70px; 
     background: blue; 
     top: 80px; 
     left: 320px; 
     z-index: 1; 
     position: relative; /* added row to make z-index work */ 
    } 

Answer 2

這個作品在IE7

演示：http://jsfiddle.net/dTJ4d/1

演示2：http://jsfiddle.net/dTJ4d/2

<div id="middle-container">  
    #middle-container 
    <div id="container-behind"> 
     #container-behind 
    </div> 
    <div id="inner-behind"> 
     #inner-behind 
    </div> 
</div> 

DIV 
{ 
    padding: 10px; 
    color: #FFFFFF; 
} 
#middle-container 
{ 
    width: 250px; 
    height: 300px; 
    background: #FF0000; 
    left: 100px; 
    top: 20px; 
} 
#container-behind 
{ 
    width: 220px; 
    height: 110px; 
    padding-left: 70px; 
    background: #0000FF; 
    top: 80px; 
    left: 70px; 
    z-index: -1; 
    position: absolute; 
} 
#inner-behind 
{ 
    width: 210px; 
    padding-left: 70px; 
    background: #80E64D; 
    position: relative; 
    z-index: 1; 
    top: 75px; 
    left: 50px; 
} 

Ë DIT：清理了幾行代碼