绝对定位子元素溢出时父容器尺寸不更新的纯CSS解决方案

问题背景 #

绝对定位的红色子元素溢出父容器时，不会撑开父容器高度，导致下方蓝色.another-container内容被覆盖。由于红色容器内是动态内容，无法添加固定边距，要求仅用CSS解决，不使用JavaScript，子元素高度可变，可调整定位方式。

解决方案 #

舍弃绝对定位，改用相对定位+transform实现视觉重叠，同时保留元素在文档流中的占位空间，让父容器自动撑开高度，避免后续内容被覆盖。

修改后的CSS代码 #

.parent{
  position: relative;
}

.static-child{
  width: 100%;
  height: 200px; 
  background-color: aqua;
}

.absolute-child{
  /* 替换absolute为relative，保留文档流占位 */
  position: relative;
  margin: 0 1rem;
  /* 向上移动自身高度的50%，实现与静态子元素底部重叠 */
  transform: translateY(-50%);
  background-color: red;
}

.another-container{
  background-color: blue;
}

HTML代码（无需修改） #

<div class="parent">
  <div class="static-child"></div>
  <div class="absolute-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, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  </div>
</div>

<div class="another-container">
<h2>
What is Lorem Ipsum?
</h2>
<p>
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, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>
</div>

方案说明 #

1. 保留文档流占位：将红色容器的position: absolute改为position: relative，使其不脱离文档流，父容器会自动计算并撑开高度，包含红色容器的完整占位空间。
2. 视觉重叠效果：通过transform: translateY(-50%)让红色容器向上移动自身高度的50%，实现与水色静态子元素底部重叠一半的视觉效果，该变换仅改变元素视觉位置，不影响文档流布局。
3. 适配动态内容：无论红色容器内的动态内容高度如何变化，父容器都会自动适配高度，后续蓝色容器始终位于红色容器下方，不会被覆盖。

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