absolute子元素默认相对于视口左上角定位，前提是所有祖先元素position均为static；若存在position:relative等已定位祖先，则以最近的已定位祖先为参考。
absolute子元素默认就相对于body定位，前提是没遇到已定位祖先
只要所有祖先元素的position都是static（即没显式设置relative/absolute/fixed/sticky），position: absolute子元素就会直接锚定到初始包含块——现代浏览器中基本等价于body或视口左上角，而非html根元素。
常见错误是误以为“父元素没设position就等于自动成为参考”，其实它根本不算“已定位”，浏览器会继续向上穿透；直到body（通常有position: static，也不算）或退至视口本身。
- 检查DOM路径上是否意外存在
position: relative的爷爷/曾爷爷元素——哪怕只是某个布局 wrapper，都会劫持定位上下文 -
body自身若被设为position: relative或absolute，它就变成合法锚点；但多数项目不会这么干，所以默认行为就是“飞到视口左上” - 用开发者工具的“Computed”面板看目标元素的
Containing Block，比猜更准
为什么加了position: relative的父元素却没生效
不是写了position: relative就万事大吉。以下情况会让它“失效”：
- 父元素实际被其他CSS规则覆盖，比如某处全局样式写了
[class*="card"] { position: static !important; } - 父元素用了
transform、filter或will-change——这些属性在现代浏览器中会隐式创建新的 containing block，导致absolute子元素以它为参考，而不是你写的relative父级 - 父元素是
display: grid或flex容器的直接子项（即网格项/弹性项），它默认position: static，但若没手动加position: relative，子元素仍会跳过它去找更上层的定位祖先
想强制相对于body，但父元素又必须有relative
典型场景：父容器需要position: relative来撑开高度或配合z-index，但你又不希望absolute子元素被它捕获。这时不能删relative，而要切断定位上下文传递：
- 给父元素加
contain: layout（支持度尚可，Chrome/Firefox/Edge 102+）——能阻止它成为 containing block - 更通用的做法：把
absolute子元素移出当前父容器 DOM 结构，挂到body下，再用 JS 动态计算位置（例如getBoundingClientRect()） - 避免用
transform: translateZ(0)之类“触发硬件加速”的写法，它也会悄悄创建新 containing block
top: 0; left: 0没贴住body顶部？注意滚动和缩放影响
即使absolute真相对于body，top: 0; left: 0也不是永远钉死在屏幕左上角：
-
body若有margin（比如某些重置样式漏了body { margin: 0; }），元素会从body内容区左上开始算，看起来偏移 - 页面滚动时，
absolute元素会随文档流一起滚——它不固定；要固定得换position: fixed - 用户缩放页面（Ctrl + / -）时，
top/left按 CSS 像素计算，视觉位置可能轻微漂移，尤其在高 DPR 屏幕上
真正稳定锚定视口左上角的唯一方式是position: fixed；absolute只保证“相对于初始包含块”，而这个块在滚动、缩放、iframe嵌套等场景下行为并不完全可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
