position: absolute 的 top/left 从包含块的 border-box 左上角（border 外边缘）开始计算；relative 的偏移起点是元素自身原 border-box 位置；translate() 起点是元素自身 border-box，且不触发重排；box-sizing 完全不影响定位原点。
position: absolute 的 top/left 从哪开始算
它从 border-box 的左上角（即 border 外边缘）开始计算，不是 padding 内侧，也不是 content 区域。也就是说，top: 0; left: 0 会让元素紧贴父容器的 border 外边线。
常见错误现象：position: absolute 元素看起来“偏移了”，实际是父容器有 padding 或 border，而你误以为定位起点在 padding 内侧；或者用了 box-sizing: border-box 却没意识到它只影响尺寸计算，不影响定位原点。
- 定位原点固定为包含块（containing block）的 border box 左上角，与
box-sizing无关 - 如果父容器设置了
padding: 20px，top: 0仍会贴到 border 顶边，内容区实际离顶边有 20px + border 宽度 - 想让绝对定位元素对齐到 padding 内侧？得手动加偏移，比如
top: 20px（假设父 padding-top 是 20px）
relative 定位的偏移起点是 content box 吗
不是。position: relative 的 top/left 偏移，是相对于它**原本在正常流中的 border box 位置**进行移动的 —— 也就是它没加定位前，占据的那个 border box 框的左上角。
这意味着：即使元素自身有 padding 或 border，它的相对位移起点仍是那个完整 border box 的角点，不是 content 区域起点。
- 给一个
padding: 10px; border: 2px solid的div加position: relative; top: 5px，它整体下移 5px，包括 border 和 padding 都一起动 - 不会因为设置了
box-sizing: border-box就改变这个行为 —— 这个属性只影响 width/height 如何分配给 content/padding/border，不改变定位参考系 - 容易被忽略的一点：relative 元素仍占据原文档流空间，它的原始 border box 位置决定了其他元素的布局，偏移后不会释放那块空间
transform: translate() 和 top/left 的起点一样吗
不一样。translate() 是对元素自身的坐标系做变换，起点是元素自己的 border box 左上角；而 top/left（在 relative/absolute 下）是相对于外部参考系（父容器 border box 或自身原位置）的偏移。
关键区别在于：translate 不触发重排（reflow），只走重绘（repaint）或合成；而 top/left 在 relative 下会参与 layout 计算（虽然不破坏流），在 absolute 下虽不占流但依赖包含块 layout 完成。
-
top: 10px（relative）→ 元素原位置的 border box 向下移 10px，后续文档流不变 -
transform: translateY(10px)→ 元素视觉下移 10px，但布局位置（layout position）完全没变，其他元素感知不到它动过 - 如果你用 translate 模拟定位，要注意它不影响
getBoundingClientRect()返回的 layout 位置 —— 返回值还是偏移前的
box-sizing 影响定位起始点吗
完全不影响。box-sizing 只控制 width 和 height 属性如何分配到 content/padding/border 上，它不改变任何定位原点、不改变 border box 的几何位置，也不改变元素在文档流中占据的空间范围。
很多人混淆是因为：设了 box-sizing: border-box 后，同样写 width: 100px，元素看起来“变小了”（因为 padding/border 被包进去了），误以为定位也跟着缩进。其实 border box 的左上角根本没动。
-
box-sizing: content-box和border-box下，position: absolute; top: 0的效果一模一样 - 真正影响视觉对齐的是你有没有显式设置 padding/border，而不是 box-sizing 本身
- 调试时建议直接用浏览器开发者工具选中元素，看 “Layout” 面板里的 border box 边框 —— 那才是定位真正的起点
最常被绕晕的地方是：把“内容可视区域”的直觉，错当成定位系统的参考系。CSS 定位永远锚定在 border box，不是 padding 内侧，不是文字起点，也不是 background-origin。盯住 border box 四条线，所有 offset 都有解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
