父容器 height 为 0 是正常行为，不是 bug；因绝对定位元素脱离文档流，父容器计算高度时忽略它们，导致背景、边框不显示及兄弟元素上移等现象。
父容器 height 为 0 是正常行为，不是 bug
只要父容器 position: relative，而所有子元素都用了 position: absolute，父容器的 height 就会是 0——这不是渲染错误，是 CSS 规范明确规定的：绝对定位元素完全脱离文档流，父容器在计算高度时直接忽略它们。
常见现象包括：background-color 不显示、border 看不见、下方兄弟元素上移贴顶、offsetHeight 或 getBoundingClientRect().height 读出来是 0。
别指望 min-height 自动适配内容；也别给父容器加 height: 100%，它依赖上级有明确高度，容易引发连锁塌陷。
手动设置父容器高度（最可控，但需维护）
当子元素尺寸固定、或可通过 JS 静态推算时，这是最直接的办法。关键不是“让父容器自适应”，而是“告诉父容器它该有多高”。
立即学习“前端免费学习笔记（深入）”；
-
height适合尺寸确定的场景（如固定尺寸弹窗、图标徽标容器） -
min-height更安全，可配合 JS 动态更新：读取child.getBoundingClientRect().bottom，再设parent.style.height = `${maxBottom}px` - 若子元素位置由 JS 动态计算（比如拖拽、动画），记得高度也要同步更新，不能只改
top/left - 响应式场景下，用
@media分段设置不同height值，比 JS 更轻量
改用 Flex 布局替代纯 absolute 嵌套（推荐优先尝试）
很多所谓“必须 absolute”的需求，其实用 display: flex + 对齐属性就能更干净地实现，且天然参与高度计算。
- 右上角图标？用
justify-content: space-between+align-items: flex-start，再配margin-left: auto - 垂直居中文字？
display: flex+align-items: center+justify-content: center - 全屏遮罩？
place-items: center或grid-area: 1 / 1更语义清晰 - 注意：Flex 容器内仍可对个别子元素设
position: absolute（比如悬浮按钮），只要至少有一个子元素留在流内撑高即可
用伪元素或占位元素“骗过”高度计算（兼容老项目）
当无法重构布局、又必须保留 absolute 子元素时，可以插入一个不干扰视觉的占位元素，让父容器“看到”高度。
- 伪元素要设
display: block和显式height或min-height，例如：.parent::before { content: ""; display: block; height: 80px; } - 占位
<div class="placeholder"></div>必须放在 DOM 中 absolute 元素之后，且不能也设position: absolute - 如果子元素高度动态变化（如多行文本），伪元素的
height得用 JS 更新，或改用padding-bottom预留空间 - 注意：clearfix、
overflow: hidden、display: flow-root这些 BFC 触发方式对 absolute 塌陷完全无效
真正难的不是选哪种方案，而是判断“谁该负责高度”。多数时候，父容器不该被动等待子元素撑开，而应主动定义尺寸边界——尤其是当子元素本就脱离流时。
