子元素用transform: translate后父div未自适应，求解决方案

transform: translate 是视觉层面的位移操作，不会改变元素在文档流中的占位空间——父元素只会按照子元素原本的位置和尺寸计算自身高度，所以子元素移动后留下的空白自然不会被填补。

下面是几种可行的解决方法：

方法1：用负margin替代translate #

负margin会直接修改元素在文档流中的位置，父元素能感知到这个变化并自动调整高度。只需把 -translate-y-16 换成 -mt-16，-translate-y-32 换成 -mt-32 即可，代码改动最小：

<script src="https://cdn.tailwindcss.com"></script>
<p>距离顶部</p>
<section>
  <div class="container mx-auto my-8">
    <div class="flex flex-col gap-4 px-4 font-bold">
      <div class="bg-green-200 p-10 aspect-square w-7/12">
        <p>示例文本！</p>
      </div>
      <div class="-mt-16 self-end bg-slate-200 p-10 aspect-square w-7/12">
        <p>示例文本！</p>
      </div>
      <div class="-mt-32 bg-green-200 p-10 aspect-square w-7/12">
        <p>示例文本！</p>
      </div>
    </div>
  </div>
</section>
<p>距离底部</p>

方法2：调整flex布局的间距与对齐 #

结合flex的 gap 属性和负margin，也能实现重叠效果并让父容器自适应。比如可以减少默认的 gap-4，再配合负margin调整位置，本质和方法1逻辑一致，但更贴合flex布局的特性。

方法3：绝对定位（需谨慎使用） #

给父元素添加 relative，子元素用 absolute 配合 top 属性定位。这种方式会让子元素脱离文档流，所以需要确保父容器有固定高度，或者由未脱离流的元素撑起高度，否则父元素会塌陷：

<script src="https://cdn.tailwindcss.com"></script>
<p>距离顶部</p>
<section>
  <div class="container mx-auto my-8">
    <div class="flex flex-col gap-4 px-4 font-bold relative">
      <div class="bg-green-200 p-10 aspect-square w-7/12">
        <p>示例文本！</p>
      </div>
      <div class="top-[calc(100%-4rem)] self-end bg-slate-200 p-10 aspect-square w-7/12 absolute">
        <p>示例文本！</p>
      </div>
      <div class="top-[calc(200%-8rem)] bg-green-200 p-10 aspect-square w-7/12 absolute">
        <p>示例文本！</p>
      </div>
    </div>
  </div>
</section>
<p>距离底部</p>

总结 #

优先选方法1，它直接作用于文档流，父元素会自动适配高度，代码改动少，完全符合Tailwind的使用习惯。方法3适合复杂定位场景，但需要额外处理父容器的高度问题。

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