为什么使用绝对定位时图片会覆盖下方第二个div的文本内容

问题原因 #

你给包裹图片的最外层div设置了absolute绝对定位，绝对定位元素会脱离正常文档流，不会在页面中占据实际高度位置，后续的普通流元素就会直接从页面顶部开始排布，自然就被脱离流的图片容器盖住了。

修复方案 #

不要给外层的图片容器加绝对定位，改为给它加relative相对定位，它会继续保留在正常文档流中，占据对应的图片高度，内部需要叠加的文字元素用绝对定位就可以正确覆盖在图片上方，同时后续的内容也会正常排在图片容器下方。

修正后的核心代码 #

<!-- 外层容器用relative，保留文档流高度 -->
<div class="relative bg-cover w-full object-fill">
  <img src="https://i.pinimg.com/originals/16/9c/f8/169cf8b4b0fc8c7411662da2eab90c2a.jpg" alt="">
  <!-- 内部文字用absolute，相对于外层relative容器定位 -->
  <div class="absolute bottom-0 text-white font-bold text-3xl w-full text-center" style="background-color: rgba(0, 0, 0, 0.6);">
    THIS SECTION
  </div>
</div>

<!-- 后续内容正常排布，不会被覆盖 -->
<div class="text-4xl flex items-center justify-center bg-gradient-to-br from-ispmain to-yellow-400 text-white font-bold mx-auto">
  WELCOME TO THIS SECTION
</div>
<section class="bg-white md:ml-8 md:mr-8 px-4 py-4">  
  <div class="flex flex-col md:flex-row px-8 my-4">
    <div class="flex flex-wrap text-lg md:w-3/5 leading-relaxed md:order-first">
      <p class="fade text-justify">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate sit et omnis id vitae vel tenetur veniam tempora nam officia consequuntur dignissimos dolorem corrupti molestiae similique ipsam, qui suscipit veritatis?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ipsum odio! Culpa dolorum sit laborum velit aut earum nostrum et quam? Placeat asperiores officiis reprehenderit! Reiciendis voluptatibus nisi illo doloremque.
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati maiores magni, omnis tempora debitis fuga consequuntur delectus soluta quae, commodi est itaque placeat totam voluptatum laboriosam quidem mollitia ex eveniet.
      </p>
    </div>
  </div>
</section>

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