css - 绝对元素不会显示

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>

score 1 · Accepted Answer

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;
}

试试这个也许有帮助....

score 0 · Accepted Answer

当您将元素设置为absolute- 定位时，它将从文档流中删除。在这种情况下，这意味着容器<div>现在里面没有“任何东西”，因此折叠到零高度。

另请注意，您几乎应该始终为包含元素position:relative提供绝对元素的来源。

但是，主要问题是容器高度不足。解决这个问题，您的图像应该会显示出来。

如果没有，请尝试同时指定图像的高度。

2 回答 2