絕對覆蓋div元素不覆蓋相對定位元素

在IE7瀏覽器中，我剛剛遇到一個關於位置的問題。我做了一個演示頁面來測試相對和絕對的位置條件。有下面的相關代碼：絕對覆蓋div元素不覆蓋相對定位元素

[CSS]

.rela{ 
    width:200px; 
    height:100px; 
    background:#EEE; 
    margin-bottom:10px; 
    position:relative; 
} 
.abs{ 
    width:50px; 
    height:50px; 
    position:absolute; 
    background:#333; 
    left:20px; 
    top:80px; 
    z-index:10; 
}

[HTML]現在

<div class="rela"><div class="abs"></div></div> 
<div class="rela"><div class="abs"></div></div> 
<div class="rela"><div class="abs"></div></div> 
<div class="rela"><div class="abs"></div></div>

，問題是，在IE7瀏覽器中，「ABS」元件由覆蓋下一個「rela」元素，但它在Firefox，Chrome，IE8等其他瀏覽器中表現良好。我知道有人說我們可以爲父「rela」元素添加更高的z-index，但對於上面的代碼，這個問題不能在這種情況下修復，因爲有兩個以上的rela元素和所有他們有abs元素。

我不知道如何解決它現在。此外，如果有人能夠提供關於這個「錯誤」的官方解釋，它將會非常好。

enter image description here

來源

2011-12-30 init.Monk

啊... IE。微軟MVP在行動。 – 2011-12-30 14:02:33

加到。顯示：表格;'可能工作。未經測試 – 2011-12-30 14:06:54

對不起，（只）添加'display：table;'到'.rela'不起作用 – scessor 2011-12-30 14:22:14

同樣的問題被問here。

不要問我爲什麼，但最後的答案似乎解決這個問題（儘管你需要的jQuery等）：

http://jsfiddle.net/Xmznn/1/

來源

2011-12-30 14:07:07 ptriek

js方法可以解決這個問題，但我只想知道是否有一種方法只能用CSS來做到這一點？ – 2011-12-30 14:18:49

這種方式可以遍歷所有匹配的元素，並將它的'z-index'屬性設置爲比其前一個元素更低的值。我不認爲它是解決問題的好方法。 – 2011-12-30 14:28:57

嘗試增加

z-index : 0;

要div.rela

來源

2011-12-30 13:57:51

對不起，它不適合我。 – 2011-12-30 14:03:19

或者你可以讓你的網站說「爲什麼IE？」每當有人使用它的IE瀏覽器！它在IE8 +上工作嗎？我放棄了試用IE7，更不用說6！ – 2011-12-30 14:07:02

是的，它在IE8 +和其他瀏覽器上運行良好。我爲我的網站放棄了IE 6和7。但這是我公司項目的要求。 – 2011-12-30 14:13:03

知道的問題，有據可查的在那裏。支票 - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

這可能會幫助你。

來源

2011-12-30 14:07:58

呃，我剛剛發現這個網站，它的條件與我的不符，所有這些元素都需要解決這個問題，如果是的話，就等於不要向父元素添加更高的z-index。 – 2011-12-30 14:17:40

無論如何，它歸結於相同的錯誤。如果你看看scessor的迴應，那實際上是可行的。 – 2011-12-30 16:01:38

是的，「js解決方案」與scessor的解決方案一樣。我想也許這是解決這個問題的唯一方法。非常感謝。 – 2011-12-30 16:46:44

全部給出div s同類rela和z-index，第一個是最高值，最低值是最低值。

<div class="rela" style="z-index: 40;"><div class="abs"></div></div> 
<div class="rela" style="z-index: 30;"><div class="abs"></div></div> 
<div class="rela" style="z-index: 20;"><div class="abs"></div></div> 
<div class="rela" style="z-index: 10;"><div class="abs"></div></div>

另請參閱此example。

來源

2011-12-30 14:12:04 scessor

這與「js解決方案」幾乎相同，可以爲元素設置比前一個值更低的值。但我認爲它不是一個好方法。 – 2011-12-30 14:30:35

這並不好，但我擔心這是唯一的選擇。 – scessor 2011-12-30 14:38:48

我也感到有點悲觀，也許沒有其他方法可以解決它。 – 2011-12-30 14:48:39

看到的變化，它是在IE 7

.rela{ 
    width:200px; 
    height:100px; 
    background:#EEE; 
    margin-bottom:10px; 
} 

.abs{ 
    width:50px; 
    height:50px; 
    background:#333; 
    margin:80px 0 0 20px; 
    z-index:0; 
    position:absolute; 
}

來源

2011-12-30 14:38:35 manny

從'.rela'中刪除'position：relative;'會導致'.abs'失去參考點，所以實際上'.abs'元素都位於相同的位置。 – 2011-12-30 14:41:57

你測試過這段代碼嗎，因爲它在IE7,8和9，Firefox，Chrome，safari和Opera中都能正常工作嗎？ – manny 2011-12-30 14:46:38

我知道，它看起來很有效，但actullay，所有這四個'.abs'位於相同的地方，它們被相互覆蓋。 – 2011-12-30 14:51:16

工作有一個有用的resource來解決這個問題。長話短說，如果你絕對放置的div（.abs）是空的，IE不喜歡將它放在其他元素的前面，而不管z-index如何。您可以使用1x1透明gif來克服這個問題，例如。通過在div上設置類似以下的樣式：

.abs { 
    background: transparent url('/images/clear.gif') repeat 0 0; 
}

我發現這有幫助。這很好，因爲只需要很少的附加樣式，而且您不必明確管理z索引。

來源

2013-08-14 20:38:37

絕對覆蓋div元素不覆蓋相對定位元素

回答

相關問題