IE7 z-index堆棧錯誤 - 如何正確堆棧2個絕對定位元素？

我運行到IE7的z-index堆疊錯誤，但我不能找到一個方法來解決它。這裏有一個簡單的HTML測試用例：IE7 z-index堆棧錯誤 - 如何正確堆棧2個絕對定位元素？

<!doctype html /> 
<html> 
<head> 
</head> 
<body> 
<div style="position:relative; width:500px;"> 
    <div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;"> 
     <p style="margin:0;">Menu</p> 
     <ul style="position:absolute; z-index:100; list-style:none; margin:0; padding:0; background-color:#fff; border:1px solid #0000ff;"> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
     </ul> 
    </div> 
    <div style="position:absolute; z-index:1; top:40px; width:500px; height:75px; background-color:#ccc;"> 
     <p>Header</p> 
    </div> 
</div> 
</body> 
</html>

在這個例子中，你會發現在頂層div中有兩個絕對定位的元素。第一個是菜單，第二個是標題。菜單項目堆疊不正確，並顯示在標題後面。

Screenshot

我讀過很多關於IE7的z-index錯誤的帖子，但我沒有發現任何東西，可以幫助我與此特定問題。謝謝！

來源

2012-03-19 Redtopia

'<！DOCTYPE HTML />'是不是一個有效的DOCTYPE。相反，使用'<！DOCTYPE html>'這應該阻止IE使用quirksmode。 – Zeta 2012-03-19 18:42:08

這是IE7和z-index的一個普遍問題。以下是我回答的前一個問題的參考，其中還包含更多參考資料供進一步閱讀。

Text overlapping items in Dropdown items

長話短說，如果頭框和菜單框是sibings，你需要設置那些z-index的。如果僅在菜單項上設置z-index，則IE7不起作用。

<div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;">

上面的DIV需要更高的z-index，因爲它是包含正在進行重疊的子項的兄弟。

從某種意義上說，它需要在IE7中的父元素給予的z-index到它的孩子。雖然技術上不正確，但用這種方式說或理解起來更容易。

這裏有一個小提琴：http://jsfiddle.net/JT9tw/

來源

2012-03-19 19:04:47 jmbertucci

確保驪都頭之後。很高興你的li具有比標題更高的z-index。但是李先生是另一個堆棧的孩子。和堆具有爲0 的z-index因此，這意味着貴麗在於具有0本身的z索引的元素具有Z-索引關100。標題是z =索引1的另一個堆棧，位於另一個div（及其子節點）之上。

來源

2012-03-19 18:46:27

父元素位置應設置爲相對和絕對定位元件應具有它們的顯示集合。

來源

2012-03-19 18:58:47

IE7 z-index堆棧錯誤 - 如何正確堆棧2個絕對定位元素？

回答

相關問題