修改

Question

我想了解为什么带display:block的div不会位于display:block

的另一个div下

我的标记是：

.container{
  display: block;
  position: relative;
}

.container img{
  width: 100%;
  position: absolute;
  top:0;
  left:0;
}

.container .text-left{
  position: absolute;
  top:35rem;
  left:35rem
}

.container .text-right{
  position: absolute;
  top:35rem;
  right:35rem
}

<div class="container" >
  <img src="/image1.jpg" alt="">
  <div class="text_left">
    <h2>HEADING 1</h2>
  </div>
</div>
<div class="container" >
  <img src="/image2.jpg" alt="">
  <div class="text_right">
    <h2>HEADING 2</h2>
  </div>
</div>

我正在尝试各种各样的东西来完成这项工作 - 溢出等 - 但似乎无法将第二个显示块div放在第一个下面。

编辑：看起来如果你将position：absolute element / s放在一个位置：relative元素 - 由于该元素是一个图像而可能有高度 - 绝对元素/ s将其移除高度。因此，您需要将其添加回高度：X。

但为什么??

这是遗产标记 - 使用绝对不是为非设计的方式吗？

为什么浏览器不会将图像高度视为默认值。如果需要，我们可以覆盖它。

任何人都可以开导我吗？

感谢

Answer 1

您丢失高度的原因是因为position:absolute;从流中删除了元素，因此您的父容器将无法使用它来计算其高度。它不是传统标记，它是范围的一部分。

A quick excerpt from CSS-Tricks

关于绝对定位的权衡（以及最重要的事情）是从页面上的元素流中删除这些元素。具有此类定位的元素不受其他元素的影响，并且不会影响其他元素。每次使用绝对定位时都要考虑这个问题。过度使用或不当使用会限制您网站的灵活性。

如果出于某种原因，您需要将该特定元素设置为position:absolute;，那么您的下一个最佳选择是使用JavaScript / jQuery调整父容器，但这可能是一个庞大的修复。

我的建议是尝试在不使用绝对定位的情况下尝试实现您的首选布局，然后如果您遇到困难，请在此处发布另一个问题，说明您想要的布局和当前代码以实现它。

修改

话虽如此，如果提到的JavaScript / jQuery解决方案对您来说听起来不那么笨重，您可以尝试以下方法：

$('.container').each(function(){
    $(this).css({
        'padding-top': $(this).find('img').height()+'px'
    });
});

这会根据图片大小将padding-top添加到容器中。或者，您可以在图像下方添加一个空div，并根据图像大小调整其高度。

Answer 2

要使其有效，只需将img和test_*位置设为relative而不是absolute。为什么？位置绝对会从流中移除元素，这意味着因为您container的所有子项都是absolute，所以就像您的容器没有内容一样，这就是它崩溃的原因。

.container{
  display: block;
  position: relative;
}

.container img{
  width: 100%;
  position: relative;
  top:0;
  left:0;
}

.container .text_left{
  position: absolute;
  top:90%;
  left:5%;
  color: #fff;
}

.container .text_right{
  position: absolute;
  top:90%;
  right:5%;
  color: #fff;
}

<div class="container" >
  <img src="https://placeimg.com/640/480/any" alt="">
  <div class="text_left">
    <h2>HEADING 1</h2>
  </div>
</div>
<div class="container" >
  <img src="https://placeimg.com/640/480/any" alt="">
  <div class="text_right">
    <h2>HEADING 2</h2>
  </div>
</div>

为什么位置图像：绝对没有高度？当我在浏览器中看到它有高度

2 个答案:

修改