2009-11-03 64 views
1

我一直在IE7敵人的CSS Z指數作戰幾個小時了,也許你可以幫忙!CSS z-index被頁面元素順序覆蓋?

我有一個絕對定位的股利,出現在其父股利上面,這是偉大的。但是 - 它出現在後面的div中,它是它的父母的兄弟姐妹。

這似乎很奇怪的行爲,就像z-index只適用於每個div的局部範圍或其他東西。

我該如何進行設置,以便當我設置的元素具有比頁面上其他任何元素更大的z-index時,它將顯示在最上面,無論?

這裏是我的測試頁:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>test</title> 
</head> 
<body> 
<div style="position: relative; z-index: 0"> 
    div1 
    <div style="position: relative; z-index: 0"> 
     div2 
    </div> 
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2"> 
     div3 
    </div> 
</div> 
<div style="position: relative; z-index: 0"> 
    div1 
    <div style="position: relative; z-index: 0"> 
     div2 
    </div> 
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2"> 
     div3 
    </div> 
</div> 
<div style="position: relative; z-index: 0"> 
    div1 
    <div style="position: relative; z-index: 0"> 
     div2 
    </div> 
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2"> 
     div3 
    </div> 
</div> 
</body> 
</html> 

回答

0

IE具有major z-index bug

在Internet Explorer定位 元素產生新的堆疊 上下文中,開頭的z索引值0 因此z索引不起作用 正確。

您可以嘗試更改z索引,但是如果您希望這兩個元素都出現,您可能必須將它們從其祖先結構中拉出來,並使它們成爲頂級DOM元素。

0

與位置的元素:絕對會採取其容器內的絕對位置,特別是如果這個容器設置爲位置:相對的。

所有位置:需要根據視口進行定位的絕對元素應直接位於「body」元素下的DOM中。通常認爲這是一種很好的做法,可以在關閉body標籤之前將它們放在您的html代碼中。

0

只是刪除position: relative

0

的圖像能有一個風格=「的z-index:#」或必須將圖像駐留在它的DIV自己?