绝对定位元素撑不开父容器高度，因其脱离文档流使父容器无法感知其尺寸；同级元素会被遮挡因z-index依赖层叠上下文；应按布局需求选择定位方式而非强行修复。
绝对定位元素为什么撑不开父容器高度
因为 position: absolute 会让元素完全脱离文档流，父容器在计算自身高度时直接“看不见”它。哪怕子元素内容再高，父容器高度仍可能塌陷为 0（尤其当父容器没有其他非定位子元素或显式高度时）。
- 常见错误现象：
div设了position: absolute后，父div在 DevTools 里显示高度为 0，背景色/边框都缩成一条线 - 典型场景：下拉菜单、弹窗、tooltip —— 它们本就不该参与父容器布局，但若误用于需要撑高父容器的场景（比如侧边栏导航项），就会出问题
- 不要试图用
height: 100%或min-height强行修复——父容器本身没高度，百分比值无效
同级元素怎么被绝对定位“穿透”或遮挡
绝对定位元素默认层级（z-index）为 auto，渲染顺序取决于 DOM 顺序和层叠上下文。它不占空间，但会真实绘制在其他同级元素之上或之下，造成视觉遮挡或点击失效。
- 常见错误现象：点击不到下方按钮，或者文字被绝对定位的 badge 盖住，但检查 DOM 发现结构没问题
-
z-index只对已建立层叠上下文的元素生效；父容器没设position: relative或z-index，子元素的z-index就不会起作用 - 同级中多个
position: absolute元素，后写的 DOM 默认在上层；但一旦父容器创建了层叠上下文（如设了z-index: 1），内部所有绝对定位子元素就只能在这个上下文内比层级
想让父容器响应绝对定位子元素高度？别硬撑，换思路
强行让父容器“感知”绝对定位子元素高度，违背 CSS 设计逻辑，也没有标准方案。正确做法是区分用途：需要撑高就不用 absolute，需要脱离流就接受它不参与高度计算。
- 如果目标是“视觉上居中+父容器自适应”，优先用
display: flex或display: grid+align-items/place-items - 如果必须用绝对定位（比如动画入口/出口），且父容器高度又依赖内容，就把真正决定高度的内容保留在文档流中——例如把标题、正文用普通块级元素写，只把装饰性 icon 或角标设为
absolute - 极少数需 JS 辅助的场景（如动态 tooltip 高度影响容器），应监听内容变化并手动设置父容器
min-height，而不是尝试读取getBoundingClientRect()去模拟文档流行为
relative 父容器不是万能垫脚石
给父容器加 position: relative 是为了给子元素提供定位参考，但它本身不解决高度塌陷，也不自动触发 BFC（除非同时满足其他条件）。
立即学习“前端免费学习笔记（深入）”；
- 错误认知：“只要父容器设了
relative，里面absolute的东西就能影响它的高度”——不会 -
position: relative只创建新的定位上下文，不影响盒模型计算；要触发 BFC 让父容器包裹浮动或清除塌陷，得靠overflow: hidden、display: flow-root等其他属性 - 兼容性注意：
display: flow-root在 IE 中不支持，若需兼容，overflow: auto更稳妥，但可能意外触发滚动条
