html - 当内容在相对/绝对位置重叠时向下推下一个 DIV

Question

我有以下 HTML(示例:https://jsfiddle.net/nL3tc7vw/2/):

<div class="parent">

  <img src="https://via.placeholder.com/400x80?text=Image">

  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
  </div>

</div>

<div class="next">
  Next div ...
</div>

使用以下 CSS:

div.parent {
  position: relative;
  border: 1px solid red;
  width: 400px;
}

div.child {
  border: 1px solid blue;
  position: absolute;
  top: 0;
}

div.next {
  border: 1px solid green;
  width: 400px;
  font-weight: bold;
}

当“子”DIV 内容高度大于图像高度时，如何防止“父”DIV 与“下一个”DIV 重叠？

基本上，我需要 Child 中的文本覆盖图像，而不是与下一个 div 重叠。

Answer 1

当使用 z-index 校正重叠时，您需要为您尝试做的事情添加一个位置层。我在 div.child 类中添加了“position: relative”。这样 IMG 位于第一个 div 的后面，并且不会与容器文本重叠。看下面的例子:

我认为 @Mr Lister 通过添加 position: absolute 到 img 容器来控制其当前位置，从而对这个答案产生了影响。

div.parent {
  position: relative;
  border: 1px solid red;
  width: 400px;
}

img {
  position: absolute;
  top: 0;
  z-index: 1000;
}

div.child {
  position:relative;
  border: 1px solid blue;
  z-index: 2000;
}

div.next {
  border: 1px solid green;
  width: 400px;
  font-weight: bold;
}

<div class="parent">

  <img src="https://via.placeholder.com/400x80?text=Image">
  
  <div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
  </div>

</div>

<div class="next">
  Next div ...
</div>