absolute 元素不参与父容器高度计算是 css 规范行为，因脱离文档流；overflow、clearfix、flow-root 等方案仅针对 float 塌陷，对 absolute 无效；真正有效的解法是改用 flex 布局、relative+transform、伪元素占位或 resizeobserver 动态计算。
不能撑开，是 CSS 规范行为，不是 bug，也不是样式写错了。 所有 position: absolute 元素在布局阶段就被完全跳过——父容器计算 height 时根本不会读取它的 offsetHeight、getBoundingClientRect() 或任何尺寸信息。
为什么 overflow: hidden / clearfix / display: flow-root 都没用
这些方案全是为 float 塌陷设计的，和 absolute 毫无关系：
-
overflow: hidden虽能创建 BFC，但 BFC 不改变“absolute 元素不参与高度计算”这一底层规则 -
::after { content: ""; clear: both; }清的是浮动流，而 absolute 根本不浮 -
display: flow-root同样只影响浮动清除逻辑，对脱离文档流的元素零作用
为什么 top: 0; bottom: 0 没效果
因为父容器没有可依赖的高度上下文：
- 父容器
position: relative但没设height或min-height，内部又全是 absolute 子元素 → 计算出的高度为0px - 写了
height: 100%，结果父高本身是0，100%还是0 - 父容器是
display: flex，但子元素加了position: absolute→ 它立刻退出主轴/交叉轴尺寸分配
真正能落地的替代方案
别试图“让 absolute 撑开”，而是选更匹配语义的方案：
- 用
display: flex+justify-content/align-items：比如右上角图标，父容器设display: flex; justify-content: flex-end; align-items: flex-start;，子元素保持默认定位，天然撑高 - 用
position: relative+transform: translate()：视觉偏移效果一致，但元素仍在文档流中，父容器能感知其真实高度 - 用伪元素占位：
.parent::after { content: ""; display: block; height: 24px; }，适用于位置和高度固定、不可变的场景（如单行文字+底部图标） - JS 动态计算：仅当非用 absolute 不可（如动画层叠、第三方组件限制），必须用
ResizeObserver监听，并基于getBoundingClientRect()算最大bottom偏移，再减去父容器top值——offsetHeight在这里不可靠
最容易被忽略的一点：DevTools 里看到父容器 height 是 0px，第一反应不该是改子元素样式，而是点开 computed styles，确认 height 是否标注了 (computed from children)。如果没有，说明父容器确实没从任何流内元素获得高度信号——此时问题不在子元素怎么定位，而在它是否本就该属于这个父容器的内容流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
