如何在无宽高的position:relative父容器中适配动态生成的position:absolute子元素？

嘿，这个问题我碰到过好多次啦！因为position:absolute的元素会脱离正常文档流，所以哪怕父容器设置了position:relative，它也根本“看不到”这些绝对定位子元素的存在，自然不会自动撑开。不过有几个靠谱的办法能解决这个问题，我给你捋捋：

方法1：用伪元素模拟占位（最推荐，无需额外DOM） #

核心思路是借助父容器的伪元素::after，让它占据和所有绝对定位子元素总高度（或最大底部位置）一致的空间，强制父容器撑开。

#one {
  position: relative;
  background-color: pink;
}
/* 关键代码：用伪元素撑开父容器 */
#one::after {
  content: "";
  display: block;
  height: 200px; /* 对应你示例里两个子元素的总高度：100px+100px */
  visibility: hidden;
}
#two {
  background-color: green;
  position: absolute;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 100px;
}
#three {
  background-color: yellow;
  position: absolute;
  top: 100px;
  left: 50px;
  width: 100px;
  height: 100px;
}

如果是动态生成的子元素，你可以用JS计算所有子元素的top + height最大值，再把这个值设给伪元素的height，或者直接赋值给父容器的min-height。

方法2：给父容器设置固定min-height（简单粗暴） #

如果你的绝对定位子元素总高度是可预测的，直接给父容器加min-height就行：

#one {
  position: relative;
  background-color: pink;
  min-height: 200px; /* 匹配子元素的总高度 */
}

缺点也很明显：如果子元素高度动态变化，这个方法就失效了。

方法3：替换为相对定位（布局允许的话） #

如果你的布局不需要子元素完全脱离文档流，只是需要位置偏移，把position:absolute换成position:relative就行——相对定位的元素会留在文档流里，父容器自然会被撑开：

#two {
  background-color: green;
  position: relative;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 100px;
}
#three {
  background-color: yellow;
  position: relative;
  top: 100px;
  left: 50px;
  width: 100px;
  height: 100px;
}

注意：相对定位元素会占据原来的文档流位置，可能会影响其他布局，得根据实际需求判断。

方法4：JS动态计算父容器高度（适配动态内容） #

如果子元素是动态生成的，每次生成后可以遍历所有子元素，计算它们的最大底部位置，再把这个值设为父容器的高度：

const parent = document.getElementById('one');
const absChildren = parent.querySelectorAll('[style*="position:absolute"]'); // 按需调整选择器
let maxBottom = 0;

absChildren.forEach(child => {
  const computedStyle = window.getComputedStyle(child);
  const top = parseInt(computedStyle.top);
  const height = parseInt(computedStyle.height);
  const bottom = top + height;
  if (bottom > maxBottom) maxBottom = bottom;
});

parent.style.height = `${maxBottom}px`;

记得在子元素新增/删除/高度变化时，重新执行这段计算逻辑。

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