绝对定位元素飞到左上角是因为默认参照根元素；解决方法是在期望的祖先上加position: relative，它不改变布局却提供定位上下文，且仅最近的已定位祖先生效。
绝对定位元素为什么总飞到页面左上角？
因为 position: absolute 默认找的是最近的「已定位祖先」，而绝大多数祖先没设 position，浏览器就一路往上退到 （即初始包含块），结果所有元素都相对视口定位——看着就像“飞走了”。
解决办法很简单：在你希望它相对的那个祖先元素上加 position: relative。它不改变布局位置，但会变成一个定位上下文（containing block），让子级的 absolute 有“锚点”可依。
-
position: relative本身不脱离文档流，不影响其他元素排版 - 不需要改 top/left/right/bottom 值，只要祖先有了这个声明，子元素的偏移就自动切换参照系
- 注意：
position: static（默认值）不算“已定位”，relative、absolute、fixed、sticky才算
relative 祖先会不会影响滚动或 z-index 层级？
会，但只在特定条件下。加 position: relative 本身不创建新层叠上下文（stacking context），除非你同时设置了 z-index（且值不为 auto）。
滚动方面：它不会触发 overflow 隐藏或滚动条，但如果祖先本身有 overflow: hidden 或 auto，那么 absolute 子元素超出部分会被裁剪——这是常见视觉 bug 的来源。
- 想避免裁剪？检查祖先是否意外带了
overflow: hidden - 想控制层级但又不想新建层叠上下文？别设
z-index，保持auto - 如果必须用
z-index，记住：父级z-index值会影响整个子树的层叠顺序，不是只管自己
嵌套多层 relative 祖先时，absolute 到底认谁？
认“最近的那个”。比如结构是 <div class="A"><div class="B"><div class="C"></div></div></div>，只有 .B 设了 position: relative，那 .C 的 absolute 就只认 .B，完全无视 .A 是否也设了 relative。
这点容易误判——尤其当多个祖先都加了 relative（比如为了统一加样式类），实际起作用的只是离得最近的那个。
- 用浏览器开发者工具检查“Computed”面板里的
containing block，能直接看到当前absolute元素的定位上下文是哪个节点 - 不要靠猜，DOM 层级深了之后，肉眼很难判断“最近”是谁
- 如果中间某层用了
position: absolute或fixed，它也会成为 containing block，逻辑不变
有没有比 relative 更轻量的替代方案？
没有通用替代。CSS 中唯一能创建定位上下文的非 absolute 值就是 relative、fixed、sticky 和 absolute 自身。其中 relative 是唯一不改变元素原始位置、也不脱离文档流的选择。
有人试过用 transform: translateZ(0) 或 will-change: transform 强制创建层叠上下文，但这不能创建定位上下文，对 absolute 定位无效。
-
position: sticky在滚动场景下行为复杂，且兼容性略差（IE 不支持），不适合作为通用祖先定位方案 - 千万别用
position: absolute给祖先设“空定位”——它会让祖先脱离文档流，大概率破坏布局 - 真正轻量的做法是：只在必要祖先上加
position: relative，而不是全链路都加
最容易被忽略的一点：relative 祖先的 padding 和 border 会计入 containing block 尺寸，所以子元素的 top: 0; left: 0 是贴着内容区左上角，不是边框左上角——如果需要精确对齐边框，得手动补偿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
