absolute元素默认参考初始包含块（ICB），其原点与视口左上角重合，而非body；因body默认margin导致视觉“贴边”错觉，实则ICB独立于body盒模型。
它其实不参考 body，而是参考初始包含块（ICB），在绝大多数浏览器中，这个 ICB 的原点和视口左上角重合，但边界 ≠ body 的尺寸或 margin。
absolute 元素没写 top/left 时，为什么看起来像贴着 body 左上角？
那是因为：默认情况下 html 和 body 都是 position: static，没有定位上下文，所以 absolute 元素向上找不到已定位祖先，最终回退到初始包含块（ICB）。ICB 是一个与视口对齐的矩形，其原点在滚动起点（即当前可见区域左上角），不是 body 元素的盒模型左上角。
常见误解来源：
-
body默认有margin: 8px（如 Chrome），你看到的“贴边”其实是absolute元素从视口 (0,0) 出发，而body自身向内缩了 8px —— 所以它看起来“悬空”在body左上内边距外侧 - 如果你给
body { margin: 0 }，再加div { position: absolute; top: 0; left: 0 }，它会真正顶到视口左上，而非body边框 - 用开发者工具看 computed
top/left，值为0px，但 offset 是相对于视口，不是body的getBoundingClientRect()原点
为什么很多人说“参考 body”，但 MDN 写的是“initial containing block”？
因为历史兼容性和常见重置行为造成了混淆：
立即学习“前端免费学习笔记（深入）”；
- 很多 CSS 重置库（如 Normalize.css）会写
body { position: relative }，这会让body成为合法的定位祖先 —— 此时absolute真的参考body，但这是人为干预的结果，不是默认行为 - 如果
html或body被设为position: relative/absolute/fixed，哪怕只设一个，就会拦截查找链，absolute子元素立刻以它为包含块 - 严格来说，ICB 是根元素
html的“格式化上下文边界”，但它的尺寸和滚动行为绑定视口，不是html元素自身的offsetWidth或clientHeight
如何验证参考点到底是 body 还是 ICB？
用这个最小可复现代码：
<!DOCTYPE html> <html style="border: 2px solid red; margin: 20px;"> <head></head> <body style="border: 2px solid blue; margin: 40px;"> <div style="width:100px; height:100px; background:gold; position:absolute; top:0; left:0;"></div> </body> </html>
你会发现金块紧贴浏览器窗口左上角（视口原点），而不是 body 的蓝色边框内侧 —— 它跨过了 body 的 40px margin，也避开了 html 的 20px margin。这就是 ICB 行为的直接证据。
关键判断点：
- 检查 computed 样式里
position是否为absolute，且top/left为0px - 用
getBoundingClientRect()查该元素，top和left应接近0（忽略 subpixel 渲染误差） - 禁用所有祖先的
position（包括body { position: static !important }），再测 —— 若行为不变，说明它本来就没参考它们
真正容易被忽略的点：滚动时，absolute 元素是否随页面动，和它“参考谁”无关，只和它的包含块是否滚动有关。如果包含块是 ICB（即无定位祖先），它就固定在视口坐标系里；如果包含块是某个 position: relative 的容器，而该容器本身在滚动流中，那它就会跟着容器一起滚动 —— 这才是实际布局中最常踩坑的地方。
