绝对定位元素的偏移起点是最近已定位祖先元素的内容区左上角，而非padding或border内侧；需通过结构分离（外层relative定位、内层负责padding）或手动补偿实现视觉对齐。
绝对定位元素的偏移起点是父容器的内容区左上角
这不是 bug，是 CSS 规范定义的行为：position: absolute 元素的 top、left 等偏移值，永远以**最近已定位祖先元素的内容区（content box）左上角**为原点计算。父容器的 padding 和 border 属于“装饰层”，不参与这个原点定位逻辑。
常见错误现象：
- 父容器设了
padding: 20px，子元素写top: 0; left: 0;，结果视觉上离父容器内边有 20px 间距 - 误以为加
box-sizing: content-box能改变定位起点 —— 实际上它只影响宽高计算，对定位原点毫无作用
为什么给父容器加 position: relative 还是没用
加 position: relative 的唯一作用是让父容器成为“已定位祖先”，从而把定位参考系从 body 拉回到自己身上。但它不会让 padding 变成定位基准 —— 定位起点依然是内容区左上角，不是 padding 内侧或 border 外沿。
真正需要同步做的两件事：
- 显式声明
position: relative（否则子元素可能回溯到body，而body默认有margin: 8px，造成更大漂移） - 在子元素上手动补偿
padding：比如父容器padding-left: 16px，就写left: 16px；若需贴右下角，用right: 16px; bottom: 20px（对应padding-right和padding-bottom）
想让子元素“视觉上”对齐 padding 内侧，有更干净的做法
手动加偏移容易出错，尤其响应式场景下 padding 动态变化时。推荐结构分离：
- 外层容器只负责提供定位上下文：
position: relative; margin: 0; padding: 0; border: none; - 内层容器负责视觉留白：
padding: 20px; border: 2px solid; - 绝对定位子元素挂在外层，直接用
top: 0; left: 0;就能精准贴合内层容器的可视边界
这种写法把“定位逻辑”和“视觉样式”彻底解耦，后续改 padding 或 border 不会影响子元素位置代码。
inset 属性不能替代手动偏移
inset: 0; 看似方便，但它等价于 top: 0; right: 0; bottom: 0; left: 0;，起点仍是内容区 —— 所以它会让子元素撑满内容区，而不是 padding 区。如果父容器有 padding，inset: 0 的效果就是子元素被“缩进”了那么一段距离，不是你想要的“对齐内侧”。
容易被忽略的关键点：定位起点不可更改，只能靠结构或计算去适配。任何试图用 CSS 属性“切换原点”的想法都会落空；真正稳定的方案，永远建立在明确谁是包含块、谁控制留白的基础上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
