移动端预览时Div覆盖下方文本的问题及修复需求

首先，咱们得先搞清楚问题出在哪：你父div里的子元素用了position: absolute，这个属性会让元素脱离文档流，也就是说父div完全感知不到这个子元素的存在——它的高度只会由里面的<img>来决定。如果<img>的高度比绝对定位的文字区块要矮，那父div的实际高度就会比内容总高度小，下方的<p>标签就会往上“钻”，看起来像是被覆盖了，哪怕你加了margin-bottom也没用，因为父div本身的高度就没撑起来。

下面给你两个可行的修复方案：

方案一：给父div设置最小高度 #

直接给父div加上min-height，确保它的高度能装下内部的绝对定位元素。根据你当前的样式，文字区块的top是50px，加上文字本身的行高45px，你可以把min-height设为100px左右（留点余量更稳妥），同时把margin-bottom改成你要的20px：

<div style="position: relative; margin-bottom: 20px; min-height: 100px;">
  <img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
  <div style="position: absolute; top: 50px; left: 78px;">
    <p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">“Enabling understanding means being able to communicate effectively”</p>
  </div>
</div>

这个方法简单直接，适合你不想大改布局的情况。

方案二：改用Flex布局替代绝对定位 #

如果不想依赖手动设置高度，你可以用Flex布局来实现同样的视觉效果，同时让父div自动适应内容高度，从根源上避免覆盖问题：

<div style="display: flex; align-items: flex-end; margin-bottom: 20px;">
  <img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px; margin-right: -34px; z-index: 1;">
  <p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic; margin: 0;">“Enabling understanding means being able to communicate effectively”</p>
</div>

这里用margin-right: -34px让图片往左偏移，模拟原来和文字重叠的效果，align-items: flex-end让图片和文字底部对齐，和你原来的布局视觉一致。而且Flex布局下父div的高度会自动由最高的子元素决定，下方的<p>标签自然不会被覆盖。

不管用哪个方案，核心都是让父div的高度能正确包含所有内容，这样margin-bottom: 20px才能正常发挥作用，保证和外部元素的间距。

内容的提问来源于stack exchange，提问作者Freddy