答案是否定的，就别硬塞高度进去：position: absolute 元素脱离文档流导致父容器高度塌陷是规范行为，修复需依语义判断——装饰性元素无需撑高，功能性内容应改用 flex/grid 布局或 js 动态计算实际底部偏移。
它不是 bug，是 CSS 规范行为：position: absolute 元素完全脱离文档流，父容器在计算 height 时直接忽略它——所以塌陷必然发生，修复必须主动干预。
为什么父容器高度变成 0？
父容器的 height: auto 只基于文档流内元素计算。一旦子元素设为 position: absolute，它就从流中“消失”，哪怕视觉上压在父容器里，offsetHeight、getBoundingClientRect().height、DevTools 中显示的高度全为 0 或远小于预期。常见表现包括：背景色不展开、边框缩成一条线、下方兄弟元素直接顶到顶部。
别试 clearfix、overflow: hidden 或 display: flow-root——这些全是为 float 设计的，对 absolute 完全无效。
什么时候根本不用修？
如果这个 position: absolute 元素只是装饰性定位（比如右上角徽章、背景浮层、加载动画），那父容器本就不该被它撑高。强行修复反而破坏语义，增加维护成本。
判断依据很简单：它是否属于父容器的内容逻辑？ 比如弹出菜单、翻转卡片的内容区、模态框主体——这些必须参与高度计算；而角标、遮罩层、图标提示——它们不该影响父容器尺寸。
- 装饰性元素：保持
absolute，父容器不设高度，也不加 hack - 功能性内容：优先放弃
absolute，改用布局方案
怎么用 flex/grid 替代 absolute 实现对齐？
很多所谓“必须绝对定位”的场景，其实只是想控制位置。用 display: flex 或 display: grid 能天然参与高度计算，且语义清晰。
例如右上角图标：
parent {
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
居中覆盖遮罩：
parent {
display: grid;
place-items: center;
}
注意：不要在 flex/grid 容器里再给子元素设 position: absolute——混用照样塌陷。定位逻辑必须由 flex/grid 承担，而不是叠加。
必须用 absolute 时，JS 怎么动态撑高父容器？
靠 offsetHeight 直接赋值会错位，因为它不包含 top/bottom 偏移。真正要的是元素在父容器坐标系里的实际底部落点。
- 用
getBoundingClientRect()获取子元素的bottom值 - 减去父容器的
getBoundingClientRect().top，得到相对父容器的底部偏移 - 多个
absolute子元素时，遍历取所有rect.bottom的最大值 - 记得减掉父容器自身的
padding-top和border-top - 监听用
ResizeObserver，观察每个absolute子元素，而非父容器
最易忽略的一点：不是代码写不对，而是没想清楚——这个 absolute 元素，到底该不该由父容器负责高度？答案是否定的，就别硬塞高度进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
