父zIndex問題IE6和IE7

對於我的理解。我需要把div 2放在div 3前面。我怎樣才能在IE6和IE7中做到這一點。所有其他瀏覽器工作正常。這是我的代碼。父zIndex問題IE6和IE7

CSS

div { 
     position:absolute; 
    } 
    #div1 { 
     background:#0F9; 
     top:0; 
     left:0; 
     width:500px; 
     height:400px; 
    } 

    #div2 { 
     background:#C00; 
     top:20px; 
     left:280px; 
     width:100px; 
     height:100px; 
     z-index:3; 
    } 

    #div3 { 
     background:#006; 
     top:10px; 
     left:10px; 
     width:300px; 
     height:200px; 
     z-index:2; 
    }

Código

<div id="div1"> 
    <div id="div2"></div> 
</div> 

<div id="div3"></div>

來源

2010-06-22 Leo

見Internet Explorer z-index bug?。

您需要明確地爲您的「」設置z-index。只需設置#div1 { z-index: 0; }並解決您的問題。

http://www.webdevout.net/test?01c

來源

2010-06-22 19:35:39

這2個答案不幫我。我需要把div 3放在div1和div2之間。而這些答案。一個把div1放在div3的前面，另一個複製div，我不能這樣做。有人可以幫助我嗎？ – Leo 2010-06-22 20:02:20

如果我明確指定#div爲z-index：0＃div3將位於＃div2前面。此解決方案不起作用。 – Leo 2010-06-23 20:25:08

最好的解決方案，使用閃光燈！： -/ – Leo 2010-06-28 13:18:26

我已經測試在IE6/7/8，鉻，和Firefox以下。這使#two在#one和#three之間

HTML：

<html lang="en"> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <div id="content"> 
     <div id="one">One</div> 
     <div id="two">Two</div> 
     <div id="three">Three</div> 
    </div> 
    </body> 
</html>

CSS：

#one{ 
    background-color: #f1f1f1; 
    position: absolute; 
    left:105px; 
    top:155px; 
    z-index: 0; 
} 
#two{ 
    background-color: #c9c9c9; 
    position: absolute; 
    left:100px; 
    top:145px; 
    z-index: 1; 
} 
#three{ 
     background-color: #888888; 
     color: #f1f1f1; 
     position: absolute; 
     left:95px; 
     top:135px; 
     z-index: 2; 
}

在行動：http://www.webdevout.net/test?02C

來源

2010-06-23 16:08:19 HurnsMobile

但是用這種方法你改變了html，我不能改變。你有另一種解決方案嗎？ – Leo 2010-06-23 20:21:10

據我所知，不存在用於已知的解決方案這個問題，因爲＃div1在IE7中自動獲得一個「z-index：0」，這可以防止＃div2重疊#div 3。

要使FF和Chrome的行爲更像IE7，請將「z-index：0」添加到沒有指定「z-index」的所有元素。這不會解決您的問題，但可能有助於測試。

來源

2011-05-19 11:44:21

這不完全正確：在IE7中，沒有顯式zIndex的任何元素都被視爲「自然進展」呈現，因此隱式zIndex堆棧隨着您向下移動頁面而增加。帶有顯式「位置」屬性的元素會創建一個新的堆疊上下文（在已應用的隱式上下文中），因此僅影響其各自的子元素。這就是爲什麼IE中的z-index關係（高達8）內在地被打破了！因此，在Webkit/Gecko引擎中複製這種行爲比你所暗示的要複雜得多！ – Chris 2011-09-19 11:21:32

父zIndex問題IE6和IE7

回答

相關問題