將絕對定位項目放在相對位置上。 （IE）

Question

請參考test site。在IE中有問題（6 & 7）讓絕對定位的項目出現在相對定位的位置上。

黃色框（絕對）應出現在藍色框（相對）上。我試着給藍色的Z-index降低然後黃色，但是這似乎不起作用。

任何幫助將是偉大的。

Answer 1

您需要在橙色框中設置z-index，因爲這是包含黃色框的那個。在IE6/7中，黃色框只會比橙色容器內的其他元素具有更高的Z-index。

#orange { 
    position: relative; 
    z-index: 1; 
    background-color: orange; 
} 
#blue { 
    background-color:blue; 
    height:100px; 
    overflow:hidden; 
    position:relative; 
    width:300px; 
} 

Answer 2

指定的z-index爲藍盒子明確：

#yellow { 
background-color: yellow; 
width: 100px; 
height: 150px; 
position: absolute; 
z-index: 200; 
} 

#blue { 
width: 300px; 
height: 100px; 
overflow: hidden; 
background-color: blue; 
position: relative; 
z-index: 100; 
} 

更妙的是，指定z-index的所有三個框，以消除任何瀏覽器誤解。