绝对定位元素脱离文档流，不占空间且不影响布局；需设置top/right/bottom/left定位，否则默认位于最近已定位祖先的左上角（或body）；父元素设position:relative可为其提供定位参考系。
绝对定位元素为什么“消失”在文档流里
因为 position: absolute 会让元素彻底脱离文档流——它不再占据空间，也不影响其他元素的布局位置。父容器不会为它留空，兄弟元素会像它不存在一样排列。
常见错误现象：div 加了 position: absolute 后，下面的段落直接“上移”盖住了它；或者整个元素在视觉上“不见了”，其实是被挤出视口或叠在别的层下面。
- 必须给绝对定位元素设置
top/right/bottom/left才能确定位置，否则默认是top: 0; left: 0（相对于最近的已定位祖先） - 如果所有祖先都没设
position: relative/absolute/fixed，那它就相对于body定位，容易飘到页面外 -
z-index只对定位元素生效，但它的层叠上下文受祖先影响——不是设了就一定“在最上面”
relative 和 absolute 搭配使用的实际意义
加 position: relative 到父容器，不是为了移动它自己，而是为了给子元素的 position: absolute 提供一个“参考系”。没有这层包裹，子元素就会往上找，直到 body。
使用场景：下拉菜单、气泡提示、模态框右上角关闭按钮、表单内联校验图标。
- 父元素只需声明
position: relative，无需设置偏移值 - 子元素用
position: absolute+top: 10px; right: 5px这类组合，就能精准贴边 - 避免对父元素用
position: absolute来“撑开高度”——它本身已脱离流，无法撑高父容器
absolute 元素尺寸不继承父宽的典型表现
绝对定位元素的宽度默认由内容决定（width: auto），不会自动填满父容器。很多人误以为加了 position: absolute 就等于“全宽覆盖”，结果发现文字只占一行宽，背景色也只包住文字。
错误示例：div 设了 position: absolute 和 background: #eee，但没设 width，结果背景窄得看不见。
- 要铺满父容器宽度，显式写
width: 100%或left: 0; right: 0 -
left: 0; right: 0比width: 100%更可靠——它强制拉伸，且兼容 padding 和 border - 如果父容器有
padding，left: 0; right: 0仍会贴父盒边缘，需额外减去 padding 或改用inset（现代浏览器支持）
fixed 和 absolute 在滚动行为上的关键区别
position: fixed 是相对于视口定位，滚动时不动；position: absolute 是相对于最近已定位祖先定位，滚动时随祖先一起动。混淆这两者会导致导航栏该吸顶却不吸顶，或遮罩层随内容滚走。
性能影响：频繁滚动中，fixed 元素可能触发更多合成层，但现代浏览器优化较好；真正要注意的是，不要把大量内容塞进 fixed 容器，否则可能阻塞主线程重排。
- 吸顶导航栏必须用
position: fixed，不是absolute - 如果用了
transform: translateZ(0)强制提升图层，可能让absolute表现类似fixed，但这是 hack，不可依赖 - 在 iOS Safari 中，
fixed元素在软键盘弹出时可能错位，需监听resize或用viewport相关 meta 配合
真正容易被忽略的，是“已定位祖先”的判定逻辑——它只看 position 值是否为 relative、absolute、fixed 或 sticky，哪怕这个祖先本身 top 是 0、visibility 是 hidden，它依然算数。一旦漏掉这一层，absolute 就会跳到意想不到的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
