絕對元素不會顯示

Question

我有一個div元素在一個主div中，我想將一個圖像標記放入它。問題是，當我將圖像定位到絕對位置時，圖像沒有顯示，並且容器div沒有在主div上佔用任何空間。但是，當我刪除位置：絕對圖像顯示得很好。任何幫助如何顯示它而不刪除位置：絕對？

的代碼是這樣的：

<div id="main"> 
    <div id="image_wrapper"> 
    <img style="width:100%; position:absolute; top:0px; left:0px;" src="image.png" /> 
    </div> 
</div> 

Answer 1

當您設置一個元素是absolute -positioned，它是從文檔流中移除。在這種情況下，這意味着容器<div>現在沒有任何內容，因此崩潰到零高度。

另請注意，您應該幾乎總是給包含元素position:relative提供絕對元素的原點。

但是，主要問題是容器高度不足。解決這個問題，你的圖片應該顯示出來。

如果沒有，請嘗試指定圖像的高度。

Answer 2

HTML

<div id="main"> 
    <div id="image_wrapper"> 
    <img src="image.png" /> 
    </div> 
</div> 

CSS

#image_wrapper { 
position:relative; 
} 

#image_wrapper img { 
    width:100%; 
    position:absolute; 
    top:0px; left:0px; 
} 

試試這個也許它幫助....