父元素高度塌陷不是bug而是absolute脱离文档流的必然结果；修复关键在于判断绝对定位元素是否本该属于父容器内容流，优先用relative+transform、flex或grid替代，必要时用ResizeObserver动态设置min-height。
父元素高度塌陷不是 bug，是 position: absolute 的必然行为——它让子元素彻底脱离文档流，父容器自然“看不见”它。修复的关键不在“撑开”，而在判断：这个绝对定位元素，是否本该属于父容器的内容流？
用 position: relative + transform 替代 absolute
多数所谓“必须 absolute”的场景，其实只是想实现右上角图标、居中弹层、卡片翻转等对齐效果。这些完全可以用更语义清晰的方式替代：
-
position: relative保持元素在文档流中，父容器能正常计算高度 - 用
transform: translateX()或translateY()实现视觉偏移，不改变布局位置 - 配合
top/right等属性无效，因为没脱离流；但transform不影响盒模型，且支持硬件加速 - 若需响应式偏移，可用
calc()或 CSS 自定义属性动态控制transform值
用 display: flex 或 display: grid 实现对齐
当目标是“右上角”“垂直居中”“底部贴边”这类常见对齐需求时，flex 和 grid 是比 absolute 更合理的选择：
-
justify-content: flex-end; align-items: flex-start可精准定位右上角内容，且子元素仍参与高度计算 -
grid-template-areas配合place-items能复现大多数 absolute 布局意图 - 避免嵌套多层
position: relative来制造定位上下文，减少意外参考点偏移 - 注意：不要在 flex/grid 容器上硬加
overflow: hidden来“修复塌陷”——这类容器本就不会塌陷，加了反而可能裁剪内容
必须用 absolute 时，用 ResizeObserver 动态计算 min-height
仅当无法规避 absolute（如第三方库限制、复杂动画层级、fixed 弹层需锚定某区域）时，才考虑 JS 补救。关键不是读 offsetHeight，而是算它在父容器坐标系中的真实底部落点：
立即学习“前端免费学习笔记（深入）”；
- 监听每个
position: absolute子元素：ro.observe(el)，而非监听父容器 - 回调中统一取
Math.max(...allRects.map(r => r.bottom)) - parentRect.top，再减去父容器的paddingTop和borderTopWidth - 写入
parent.style.minHeight，而非height，防止内容动态增长时被截断 - 若子元素用了
transform: scale()，getBoundingClientRect()已含缩放结果，无需额外换算 - 别在
DOMContentLoaded阶段就取值——字体加载、图片解码、异步内容都可能导致尺寸不准
真正难的从来不是代码怎么写，而是判断那个 absolute 元素：它在交互职责和视觉层级上，是不是真的属于这个父容器的内容流。如果答案是否定的，强行让它撑高，只会让后续维护越来越累。
