为什么CSS中absolute绝对定位的子元素无法撑开父容器高度？-css教程-PHP中文网

因为绝对定位（absolute）会脱离标准文档流，导致父容器在计算高度时完全忽略该子元素。要解决这个问题，需要改用相对定位（relative）、浮动（float），或者使用 flexbox 和 grid 布局来让子元素参与父容器的空间分配。

为什么CSS中absolute绝对定位的子元素无法撑开父容器高度？

为什么 absolute 子元素不撑开父容器？

当子元素设置为 position: absolute 时，它不再占据文档流中的任何空间。父容器在计算自身高度时，只考虑处于标准流中的子元素，因此绝对定位的子元素被视为“悬浮”在上方，对父容器的高度贡献为零。

为什么CSS中absolute绝对定位的子元素无法撑开父容器高度？

<div class="parent">
  <div class="child-absolute">我是绝对定位</div>
</div>

<style>
.parent {
  border: 2px solid blue;
  /* height: auto; */
}
.child-absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
}
</style>

运行上述代码，你会发现蓝色边框的父容器高度为 0，红色方块虽然可见，但没有撑开父容器。

如何正确撑开父容器？

可以使用 position: relative 或 display: flex 来替代绝对定位。相对定位的元素仍然占据文档流空间，因此能正常撑开父容器；Flexbox 则通过主轴方向自动扩展父容器高度以容纳子元素。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

为什么CSS中absolute绝对定位的子元素无法撑开父容器高度？

<div class="parent-flex">
  <div class="child-relative">我是相对定位</div>
</div>

<style>
.parent-flex {
  display: flex;
  flex-direction: column;
  border: 2px solid green;
}
.child-relative {
  position: relative;
  width: 100px;
  height: 100px;
  background: orange;
}
</style>

运行上述代码，绿色边框的父容器高度将变为 100px，橙色方块正常撑开父容器。