绝对定位元素完全脱离普通文档流，父容器计算尺寸时直接忽略它们；getboundingclientrect()比offsetheight更适合测量实际占位，因后者不反映偏移后的物理空间。
绝对定位元素根本不在父容器的布局计算中
这不是 bug，是 CSS 规范明确规定的：position: absolute 元素会**完全脱离普通文档流**。父容器在计算自身 height、width 或任何盒模型尺寸时，直接忽略它们——就像它们不存在一样。
常见错误现象：div 背景色不显示、边框塌缩为一条线、下方兄弟元素紧贴着“空盒子”往上顶；用 getComputedStyle(parent).height 读到 "0px"，offsetHeight 也是 0。
- 哪怕父容器已设
position: relative，也只提供定位上下文，**不恢复布局参与权** -
flex或grid容器同样失效——它们只基于流内子项计算尺寸，absolute子项照样被跳过 -
min-height、overflow: hidden、BFC都无法让父容器“感知”到absolute元素的存在
为什么 getBoundingClientRect() 比 offsetHeight 更适合测占位
offsetHeight 只返回元素自身盒模型高度（含 padding + border），完全不反映它因 top/bottom 偏移后在页面上实际“压”住的区域；而 getBoundingClientRect() 返回的是元素在视口中的绝对坐标，能真实捕捉它占据的物理空间。
必须等渲染完成再调用，否则坐标不准。推荐包裹在 requestAnimationFrame 或 ResizeObserver 中。
- 多个
absolute子元素共存时，要遍历取所有rect.bottom的最大值，不是只看第一个 - 算出最大
bottom后，得减去父容器自身的getBoundingClientRect().top，才是相对父容器的底部偏移 - 别漏掉父容器的
padding-top和border-top，否则设置height会多出一截
用 flex/grid 替代 absolute 实现对齐且撑高父容器
很多所谓“必须用 absolute”的场景，其实只是想实现视觉对齐（右上角图标、居中弹层），display: flex 或 display: grid 天然支持这类布局，且子元素保持在文档流中，能正常撑开父容器高度。
- 右上角图标：父容器设
display: flex; justify-content: flex-end; align-items: flex-start;，子元素保持position: static - 全屏遮罩+居中内容：父容器用
display: grid; place-items: center;，比absolute + transform更语义清晰 - 注意：如果 flex 容器内的子元素仍写了
position: absolute，塌陷照旧——关键是要让对齐逻辑由 flex/grid 承担，而不是混用
手动撑高父容器的几种实操路径
当必须保留 absolute（比如动画、第三方组件嵌入、复杂覆盖层），就得靠外部干预让父容器“知道”自己该有多高。
- JS 动态计算：遍历所有
absolute子元素，取rect.bottom最大值，减去父容器rect.top，再加回父容器padding-top和border-top，最后赋给parent.style.height - CSS 占位：用伪元素
::after设置display: block; height: 24px;，或插入空div并用 JS 同步更新其高度——前提是 DOM 顺序可控、尺寸可预测 - 预留
padding-bottom：适用于位置固定、尺寸稳定的场景（如底部工具栏高 60px，就写padding-bottom: 60px）
真正难的不是选哪个技术方案，而是判断这个 absolute 元素是否本该属于父容器的内容流——如果它只是视觉覆盖（徽章、遮罩），强行让它撑高父容器，往往意味着布局设计本身有冗余。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
