绝对元素不会显示

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

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

尝试这可能有帮助......

Answer 2

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

另请注意，您应该几乎总是给包含元素position:relative提供绝对元素的原点。

但主要问题是容器上的高度不足。修复它，你的图像应该出现。

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