如何让position:absolute的子元素的父元素与其等高？（无需JavaScript）

当子元素设置position: absolute后会脱离正常文档流，父元素无法感知其高度，进而出现高度塌陷问题。以下是两种不依赖JavaScript的解决方案，适配子元素高度不固定的场景：

方案一：使用CSS Grid布局 #

将父元素设置为display: grid，Grid容器会自动识别绝对定位子元素的尺寸，从而调整自身高度以匹配子元素，无需额外修改结构。

CSS代码 #

.parent {
  position: relative;
  background: red;
  display: grid; /* 核心属性 */
}

.child {
  position: absolute;
  right: 10px;
  width: 100px;
  background: blue;
}

HTML代码 #

<div class="parent">
  <div class="child">
    test<br>test<br>test<br>test
  </div>
</div>
<div>
  some text below parent
</div>

方案二：添加占位元素撑开父元素 #

在父元素内添加一个与子元素内容、尺寸完全一致的占位元素，通过visibility: hidden隐藏其视觉内容但保留布局空间，以此撑开父元素高度；同时让绝对定位的子元素覆盖在占位元素上方，保证视觉效果不变。

CSS代码 #

.parent {
  position: relative;
  background: red;
}

.child {
  position: absolute;
  right: 10px;
  width: 100px;
  background: blue;
  top: 0; /* 确保子元素与占位元素顶部对齐 */
}

.child-placeholder {
  width: 100px;
  margin-right: 10px; /* 对应子元素的right值，保持水平布局一致 */
  visibility: hidden; /* 隐藏内容但保留高度 */
}

HTML代码 #

<div class="parent">
  <div class="child-placeholder">
    test<br>test<br>test<br>test
  </div>
  <div class="child">
    test<br>test<br>test<br>test
  </div>
</div>
<div>
  some text below parent
</div>

方案对比 #

• 方案一代码简洁、无需额外DOM元素，是现代浏览器的最优解，支持所有主流现代浏览器。
• 方案二兼容性更强，可适配老旧浏览器，但需要维护占位元素与子元素的内容和样式同步，避免出现布局偏差。

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