父容器加 position: relative 是建立定位上下文的必要前提，但无法解决高度塌陷；绝对定位子元素仍脱离文档流，需通过 min-height、padding-bottom 或 ResizeObserver 等方式手动撑高，或改用 grid/flex 等流式布局替代 absolute 定位。
父容器加 position: relative 是必要前提，但不解决高度塌陷
子元素设了 position: absolute 后，父容器必须加 position: relative，否则它的 top/left 会相对于 body 或视口计算，根本“找不到爹”。但这一步只建立了定位上下文，不会让父容器自动撑高——因为绝对定位元素仍脱离文档流，父容器在布局阶段直接忽略它。
常见错误是以为加了 position: relative 就万事大吉，结果背景色只包住文字，右上角 badge 悬在容器外。检查 computed styles 可确认：父容器 height 仍是 auto，但实际值为 0 或极小。
手动设高度或用 padding-bottom 模拟占位
当子元素尺寸固定（比如一个 32px 高的徽章、40px 高的图标），最轻量的解法不是 JS，而是用 CSS 占位：
-
min-height比height更安全，保留向上伸展余地 - 若父容器其他内容高度不确定，可用
padding-bottom: 32px（数值等于子元素高度）来“骗”出空间 - 避免写死
height: 32px——字体缩放、响应式断点切换时极易错位 - 注意：如果父容器有
border或padding，padding-bottom的起点是 content box，需自行对齐
JS 动态同步高度要防漏算和重绘
子元素尺寸动态变化（如图片加载、字体渲染、内容插入）时，offsetHeight 必须在正确时机读取，否则返回 0 或旧值：
立即学习“前端免费学习笔记（深入）”；
- 不能只靠
window.onload——图片可能延迟加载，Web Font 渲染后高度会变 - 优先用
ResizeObserver监听子元素尺寸变化，比轮询高效且精准 - 若子元素用了
transform: scale()，offsetHeight返回原始尺寸，需乘以缩放系数 - 批量操作时，先收集所有绝对定位子项的
offsetHeight，取最大值再统一设置父容器高度，避免反复重排
真正该考虑的替代方案：别用 position: absolute
要求父容器包裹绝对定位子元素，本质是违背 position: absolute 的设计意图。更健壮的做法是让元素“回到流中”：
- 用
background-image+padding-top维持宽高比，父容器自然撑开 - 改用
display: grid，配合justify-self: end+align-self: end实现右下角定位 - 用
display: flex+margin-left: auto或place-items: center替代居中类需求 - Grid 布局中，给网格项加
position: relative即可让其内部absolute子元素锚定在单元格内，但依然要处理高度塌陷问题
复杂点不在怎么“补”，而在于是否真需要 absolute——多数所谓“必须绝对定位”的场景，其实只是没找到更合适的流式方案。
