IE6和IE7絕對定位在多個相對div上的div

Question

是否有可能使多個絕對定位的div與IE6中的多個相對定位div重疊IE7 & IE7？

有關更多信息，請參見本的jsfiddle：http://jsfiddle.net/btker/1/

HTML

<div class="wrapper"> 
    <div class="relative_div">Relative div. 
     <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div> 
    </div> 
</div> 

<div class="wrapper"> 
    <div class="relative_div">Relative div. 
     <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div> 
    </div> 
</div> 

CSS

.wrapper{ 
height: 100%; 
width: 100%; 
} 

.relative_div { 
    height: 75px; 
    width: 200px; 
    border: 1px solid #000; 
    padding: 10px; 
    background: #e6e6e6; 
    margin: 0 0 35px 0; 
    position: relative; 
} 
.absolute_div { 
    height: 100px; 
    width: 250px; 
    border: 1px solid #000; 
    background: #c6c6c6; 
    padding: 10px; 
    position: absolute; 
    top: 40px; 
    left: 100px; 
    z-index: 100; 
} 

有兩個相對<div> S（放置在相同的包裝中）包含每一個絕對<div>，其重疊所有相關的<div>。這種方式在Chrome，Firefox等更新版本中沒有任何問題，絕對<div>和z-index總是處於頂端。

在IE6和IE7中這是行不通的。這個問題與標準的「下拉菜單在頁面內容後面顯示其菜單」之間的不同之處在於，在那些情況下，它通常通過給出該特定菜單的父元素以及其他z索引等來固定。在這種情況下，兩個絕對值都是絕對的<div> s放在相同的<div> s中。

可以這樣解決嗎所以絕對的<div> s總是位於IE6的所有相對<div> s之上& IE7？對IE的條件註釋可用於使解決方案跨瀏覽器。

Answer 1

這是可能的，但只能通過減少第二個.wrapper的z-index或增加第一個.wrapper的z-index。

在一個簡單的級別上，每個帶有非自動z-index的定位元素都會創建一個新的堆疊上下文，儘管還有其他情況下會創建新的堆疊上下文 - 請參閱The stacking context。

的問題是一個影響IE <= 7，從quirksmode.org

在Internet Explorer中定位的元素產生新的堆疊環境，具有爲0的z軸折射率值開始因此z-index工作不正常。

CSS

.wrapper{ 
    height: 100%; 
    width: 100%; 
} 

.lower { 
    position: relative; 
    z-index: -1; 
} 

.higher { 
    position: relative; 
    z-index: 2; 
} 

.relative_div { 
    height: 75px; 
    width: 200px; 
    border: 1px solid #000; 
    padding: 10px; 
    background: #e6e6e6; 
    margin: 0 0 35px 0; 
    position: relative; 

} 
.absolute_div { 
    height: 100px; 
    width: 250px; 
    border: 1px solid #000; 
    background: #c6c6c6; 
    padding: 10px; 
    position: absolute; 
    top: 40px; 
    left: 100px; 
    z-index: 1; 
} 

HTML

<div class="wrapper"> <!-- add higher class here --> 
    <div class="relative_div">Relative div. 
     <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div> 
    </div> 
</div> 
<div class="wrapper"> <!-- or add lower class here --> 
    <div class="relative_div">Relative div. 
     <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div> 
    </div> 
</div>