絕對定位的div不能正確堆疊IE

我具有類似於下面的代碼：絕對定位的div不能正確堆疊IE

<div class="container"> 
    <div class="overlay"> 
     // hover content 
    </div> 
    <img/> 
</div> 

.container{ 
    position:relative; 
} 
.overlay{ 
    display:block; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}

基本上，當有人在覆蓋懸停div的顯示該div的內容。這個工程在每個瀏覽器都很棒，除了IE（當然）

在IE中，覆蓋div位於圖像後面，所以懸停不起作用。如果在覆蓋div上放置背景（顏色或圖像），它將定位在圖像上並工作，但我想避免使用背景。

我也嘗試使用z-index，但沒有成功。即使使用更高的z-index，並且在定義的z-index堆棧中（對於IE），它仍然在圖像後面。

這是所有IE版本6-9。

有沒有人知道任何解決方法/修復此？

來源

2012-06-15 Nathan Cook

爲什麼你在一個位置上使用'position：relative'而在另一個位置上使用'position：absolute'？嘗試刪除'position：absolute'行。 –

@SimonAndréForsberg位置：絕對;位置：相對;元素非常有意義。我總是使用它，當我想絕對地定位一個元素相對於其父元素。 – Paulpro

可能重複[如何點擊某個位置：固定;身高：100％;寬度：100％覆蓋在IE8？]（http://stackoverflow.com/questions/8808643/how-is-it-possible-to-click-through-a-position-fixed-height-100-width-100） – j08691

你可以通過trick.set覆蓋div背景完全透明的圖像（PNG）來解決它。

來源

2012-06-15 17:21:02

絕對定位的div不能正確堆疊IE

回答

相關問題