绝对定位子元素无法撑开父容器，因其脱离文档流，父容器在计算height: auto时不将其纳入高度计算范围，即使子元素自身有高度或内容。
为什么 position: absolute 的子元素撑不开父容器？
因为绝对定位元素完全脱离文档流，父容器在计算自身高度时“看不见”它——不是内容没高度，而是父容器压根不把它纳入 height: auto 的计算范围。
- 即使子元素有
height: 200px或大量文本，父容器高度仍可能为0px（尤其当其他子元素也脱离或为空时） - 常见于弹窗、下拉菜单、tooltip 等场景：视觉上它在父内，逻辑上它跟父无关
- 调试时在开发者工具中选中父元素，
Computed → height若显示0px且无(computed from children)标注，基本可确认是此问题
想让绝对定位元素“参与撑高”，该怎么做？
不能靠它自己，得由其他仍在文档流中的内容来驱动，或手动补足高度信号。
- 保留至少一个普通块级子元素（如空
<div></div>），哪怕只设min-height: 1px，也能让父容器恢复height: auto计算 - 用伪元素模拟占位：
.parent::before { content: ""; display: block; min-height: 1px; } - 若必须纯靠绝对定位内容撑高，改用
min-height手动设定合理值（如min-height: fit-content，但注意 IE 不支持；稳妥写法是min-height: 200px）
flex/grid 容器里，position: absolute 还会失效吗？
会，而且更隐蔽。flex 或 grid 容器本身能被内容撑开，但一旦子项设了 position: absolute，它就既不参与主轴/交叉轴尺寸分配，也不贡献容器高度。
- 例如：
.container { display: flex; flex-direction: column; }，其中某个子项加了position: absolute; top: 0;→ 该子项消失于高度计算，父容器只按其余非绝对定位子项撑高 - 不要试图在绝对定位子项上写
height: 100%：父容器若为height: auto，100%结果就是0px - 真正需要“视觉占位+高度响应”的场景，优先用
transform: translateY()替代top，保持文档流地位
什么时候该放弃“撑开”，转而接受显式控制？
当布局本质是覆盖型（overlay）、悬浮型（popover）或尺寸强约束型（如卡片内固定头尾+滚动内容区）时，“让父被撑开”本身就是错误目标。
立即学习“前端免费学习笔记（深入）”；
- 典型反例：模态框（modal）外层容器本就不该随内部绝对定位按钮或关闭图标变高，而应由内容区（
overflow-y: auto）决定滚动行为 - 此时正确做法是：父设
min-height+ 内容区设max-height+overflow-y: auto，而非纠结“怎么让绝对定位子元素撑高它” - 记住：
height: auto是为流式内容服务的机制，不是万能胶；强行让它适配定位场景，只会不断掉进height: 100%、top: 0、flex: 1的嵌套陷阱里
实际开发中最容易忽略的一点：撑开与否，从来不是子元素“有没有高”，而是父容器“认不认它”。 文档流是默认协议，position: absolute 是主动退出协议——别指望退出后还能享受协议权益。
