绝对定位元素的top/left从包含块的border-box左上角（border外边缘）开始计算，而非padding内侧或content区；box-sizing对其无影响，需手动偏移或结构分离实现padding内侧对齐。
绝对定位元素默认不以父元素 padding 外沿为起点，而是以 border box 左上角（border 外边缘）为原点；想让它“贴着 padding 内侧”对齐，不能靠改 box-sizing，得手动补偿或重构结构。
position: absolute 的 top/left 从哪开始算
它从包含块（通常是父元素）的 border-box 左上角开始计算 —— 即 border 最外侧边缘。不是 content 区，也不是 padding 内侧。哪怕父元素设置了 padding: 20px、border: 3px solid，top: 0; left: 0 仍会让子元素紧贴这层 border 的顶边和左边。
常见错误现象：position: absolute 元素看起来“离父容器内容太远”，其实是被父元素的 padding 和 border 推开了，但你误以为定位起点在 padding 内侧。
-
box-sizing完全不影响这个定位原点 —— 它只管 width/height 怎么分配给 content/padding/border - 父元素设了
padding-top: 15px？那top: 0的元素，其内容区实际离父容器内容区顶部有 15px + border 宽度 - 想让绝对定位元素的左上角对齐到父元素 padding 内侧？得写
top: 15px; left: 15px（假设 padding 均为 15px）
为什么 box-sizing: border-box 无法解决定位偏移问题
box-sizing: border-box 只改变尺寸解析逻辑：它让 width 和 height 包含 padding 和 border，但对定位参考系毫无影响。定位原点始终是 border box 角点，和尺寸怎么算无关。
使用场景：当你需要控制父容器总宽高稳定时（比如响应式栅格），box-sizing: border-box 很有用；但它不是定位对齐的开关。
- 父元素
width: 300px; padding: 20px; border: 2px solid;→ 实际占用宽度 = 300px（border-box下） - 但子元素
position: absolute; top: 0; left: 0;依然从 border 外边缘起算，不会自动“缩进”到 padding 内侧 - 试图用
box-sizing: content-box切换也无效 —— 定位原点不变，只是尺寸计算方式变了
如何让绝对定位元素真正对齐到 padding 内侧
没有魔法属性能一键切换定位起点，只有两种可靠做法：手动偏移，或结构分离。
- 手动加偏移：父元素 padding 是
20px 16px，就给子元素写top: 20px; right: 16px;—— 注意方向对应（right对应padding-right） - 结构分离（推荐）：外层父元素只负责定位（
position: relative，无padding/border），内层再套一个带padding和border的容器，绝对定位子元素挂在外层 - 避免在已设
padding的定位父元素上直接放absolute子元素，否则每次调整 padding 都要同步改子元素的top/left
relative 父元素的 padding 会影响子元素定位吗
会，但不是通过“改变定位原点”的方式，而是通过视觉错觉和空间挤压。
因为 position: relative 的父元素本身仍占据文档流空间，它的 padding 会撑开自身内容区，导致其内部可用区域变小；而子元素 position: absolute 是相对于这个被撑大的父容器定位的 —— 所以即使子元素 top: 0; left: 0;，也会被父容器的 padding “推”离内容区。
- 父元素
padding: 30px，子元素top: 0; left: 0;→ 子元素左上角贴父 border 顶边，内容区离父内容区顶边有 30px + border 宽度 - 如果父元素还设了
margin，它不影响子元素定位计算，但会影响父元素在页面中的整体位置，间接改变子元素的屏幕坐标 - 最容易被忽略的一点：当你调试时看到子元素“没贴住”，第一反应不该是调
box-sizing，而是检查父元素的padding和border值，并确认你期望的“贴住”到底是指贴 border 还是贴 padding 内侧
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
