position: absolute 使元素彻底脱离文档流，不占空间、不影响布局；其定位依赖最近非static祖先，否则相对body；需配合top/right/bottom/left或inset设置位置，且width默认不继承父宽。
position: absolute 直接移除元素的布局参与权
它不是“隐藏”或“遮盖”，而是让浏览器在计算布局时彻底忽略这个元素的存在。文档流本质是一套空间分配规则，position: absolute 的作用就是把元素从这套规则里剔除出去——不占宽、不占高、不影响兄弟元素位置、父容器也感知不到它。
常见错误现象：div 加了 position: absolute 后，下面的段落直接上移盖住它；或者元素“消失”了，其实是被定位到视口外（比如 top: -999px）或叠在别的层下面。
- 它和
visibility: hidden不同：后者仍占空间，只是不可见 - 它和
display: none也不同：后者连渲染树都不进，而absolute元素仍在渲染树中，只是脱离流 - 它和
transform: translate()更不一样：后者只改视觉位置，原文档流占位还在
脱离文档流 ≠ 没有定位参考系
元素虽然不参与布局，但它的位置必须有依据——这个依据就是“定位上下文”（containing block）。它会向上查找最近的 position 值不为 static 的祖先（即 relative、absolute、fixed 或 sticky），找不到就落到 或视口。
容易踩的坑：
- 父容器没设
position: relative，子元素就相对于定位，一缩放或滚动就飘走 - 中间某层祖先用了
position: absolute，它本身已脱离流，无法充当子元素的定位上下文（除非它自己也有已定位祖先） -
z-index只对定位元素生效，但层叠效果受祖先是否创建新层叠上下文影响——不是设了就一定“最上层”
为什么 width: 100% 在 absolute 下常常失效
因为 position: absolute 元素的宽度默认是 width: auto，也就是由内容撑开，而不是继承父容器宽度。很多人误以为加了 absolute 就自动填满，结果背景色只包住文字。
正确做法：
- 显式写
width: 100%—— 但要注意父容器若有padding，它只会填满 content box，不会包含 padding 区域 - 更可靠的是
left: 0; right: 0—— 这强制拉伸到父盒的左右边缘，兼容padding和border - 现代方案可用
inset: 0（Chrome 89+、Firefox 63+、Safari 14.1+），语义更清晰，等价于top: 0; right: 0; bottom: 0; left: 0
父容器高度塌陷不是 bug，是设计使然
当父容器所有子元素都用 position: absolute，它的 height 就会变成 0 —— DevTools 显示 offsetHeight 是 0，getBoundingClientRect().height 也是 0。这不是渲染异常，是 CSS 规范明确要求的行为。
别指望靠 min-height 或 height: 100% 解决，它们依赖已有高度或外部约束，治标不治本。
真正可行的思路只有两个方向：
- 改布局：用
flex或grid替代absolute做主结构，局部再用absolute做覆盖层（比如气泡、关闭按钮） - 手动控制：JS 遍历所有
absolute子元素，取offsetTop + offsetHeight最大值，加上padding和border，再赋给父容器style.height
复杂点在于响应式场景下要监听 resize，且不能高频触发；更隐蔽的坑是 bottom 定位的元素得反推实际占位，不能只看 offsetTop。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
