如何在响应式div中实现元素重叠且不出现absolute定位问题

问题原因 #

position: absolute 元素会脱离正常文档流，不会占据父容器的高度空间。你虽然给第一个 .row 加了 position: relative 作为定位上下文，但内部的img和button都是绝对定位，无法将父级 .row 撑开，导致这个 .row 高度塌陷为0，后续的 .row 自然会向上偏移，和第一行的绝对定位元素重叠。

解决方案 #

方案1：固定父容器高度（适合固定尺寸场景） #

如果你的图片尺寸是固定的，直接给带relative定位的 .row 设置和图片匹配的固定高度即可：

<div class="row" style="position: relative; height: 300px;">
  <img src="..." style="position:absolute">
  <button style="position:absolute">按钮</button>
</div>

方案2：占位元素撑高父容器（响应式场景首选） #

要适配响应式的话，可以在父级 .row 中增加一个同尺寸的普通文档流元素作为占位，让父容器可以被正常撑高：

<div class="row" style="position:relative">
  <!-- 占位图片，透明度为0，正常文档流撑高父容器 -->
  <img src="你的图片地址" style="opacity: 0; width: 100%;" alt="占位">
  <!-- 原本的绝对定位元素 -->
  <img src="你的图片地址" style="position:absolute; top: 0; left: 0; width: 100%;">
  <button style="position:absolute; top: 20px; left: 20px;">按钮</button>
</div>

父容器高度会跟随占位元素的响应式尺寸自动调整，不会出现高度塌陷问题。

方案3：CSS Grid实现重叠（更现代的写法） #

不需要用到定位也能实现元素重叠效果，所有元素都保留在正常文档流中，父容器会自动被内容撑高，天然适配响应式：

<div class="row" style="display: grid;">
  <img src="你的图片地址" style="grid-area: 1/1/2/2; width: 100%;">
  <button style="grid-area: 1/1/2/2; align-self: start; margin: 20px;">按钮</button>
</div>

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