绝对定位元素的 top/left 从父容器的 padding box 上边缘/左边缘起算，而非 border box 或 content box；父容器的 padding 会改变定位基准，导致元素视觉位置偏移。
padding 本身不会“导致定位上下文发生偏移”，但它会改变绝对定位元素的计算基准 —— 因为 position: absolute 默认以父容器的 padding box 为起点，而不是 border box 或 content box。
absolute 元素的 top/left 是从哪算起的？
所有已定位祖先（如设了 position: relative 的父元素）一旦成为 containing block，top: 0 就是指向该祖先的 padding box 上边缘，不是 border 边缘，也不是内容区左上角。
- 父容器有
padding-top: 20px→top: 0的子元素离其内容区顶部就有 20px 空白 - 父容器还有
border: 3px solid→ 不影响top计算，border 在 padding box 外，不参与定位基准 - 如果父容器同时用了
contain: paint或contain: layout，那它还会强制创建新的 containing block，进一步锁定这个 padding box 基准
为什么加了 padding 后弹窗/下拉菜单突然飘走？
这不是“偏移”，是定位参照系被显式固定在了 padding 区域。常见于以下场景：
- 下拉菜单原本靠
top: 100%贴着触发按钮底部，但父容器加了padding-bottom: 10px，结果菜单下沿离按钮多出 10px - Tooltip 设置
right: 0想贴右边缘，但父容器padding-right: 16px，导致 tooltip 实际停在距右边界 16px 处 - 用
transform: translateY(-100%)上移弹窗时，忘了父容器 padding 已经把“视觉顶部”往下推了
如何让 top/left 对齐到内容区而非 padding 区？
没有直接让 top 改认 content box 的 CSS 属性，但可通过组合方式绕过：
- 父容器设
box-sizing: border-box+ 显式height或min-height，确保 padding 不意外撑高定位空间 - 子元素改用
top: 0; left: 0;+transform: translate(0, -20px)（数值等于 padding 值），把视觉位置手动拉回 - 更干净的做法：把需要对齐内容区的元素再包一层无 padding 的
position: relative容器，让子元素相对于它定位 - 避免在同一个元素上既设
padding又依赖top/left精确对齐——这类混合用法极易在响应式或动态高度下失控
真正容易被忽略的，不是 padding 有没有值，而是你是否清楚当前 top 的 0 点究竟落在哪一层盒模型上。DevTools 里打开「Layout」面板，悬停父元素看蓝色 padding 区域，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
