absolute 的 top/left 百分比参照最近已定位祖先的 padding-box，即以该 box 的宽高为基准、原点在其左上角（border 内侧）；若无已定位祖先，则参照视口。
absolute 的 top/left 百分比到底参照谁？
不是 content-box，也不是 margin-box，而是最近已定位祖先的 padding-box —— 即包含 padding 区域的矩形边界。这个结论常被误记为“参照父元素 width/height”，但实际是：百分比值按该 padding-box 的宽高计算，原点在 padding-box 左上角（即 border 内侧、padding 外侧交点）。
为什么不是 content-box？看一个典型反例
当父元素设 position: relative + padding: 20px，子元素写 left: 0%，它会紧贴父元素 border 内侧，而不是 content 区左上角。此时 left: 0% 等价于 left: 0px，起点就是 padding-box 左上角；若写 left: 100%，则刚好移到 padding-box 右边界（不是 content 区右边界）。
-
top: 50%是相对于 padding-box 高度的一半，不是 content-height -
left: 100%指向 padding-box 最右端，哪怕 content 宽只有 100px，padding-box 宽是 140px（+20px×2），那 100% 就是 140px - 这个行为在所有现代浏览器中一致，IE7 是个例外（它错用 content-box），但已无实际影响
relative 和 absolute 的百分比参照系完全不同
position: relative 元素的 top/left 百分比是相对于自身 content-box 尺寸的；而 position: absolute 的 top/left 百分比是相对于最近已定位祖先的 padding-box 尺寸。这是 CSS 规范里明确区分的两种定位上下文，混用就会出偏移偏差。
- 父元素
box-sizing: border-box不改变参照系，只影响它自身 width/height 解析方式 - 父元素没设
position: relative？那 fallback 到初始包含块（通常是视口），此时百分比参照的是 viewport 尺寸，不是 body 或 html - 如果祖先用了
transform或filter，可能意外创建新的 containing block，导致参照对象突变 —— 这类 bug 很难排查，建议用浏览器 devtools 的 “Layout” 面板确认 containing block
怎么验证当前元素的参照 box？
打开 Chrome DevTools → 选中绝对定位元素 → 右侧 “Computed” 标签页 → 找到 top 或 left 属性 → 点开右侧小箭头 → 查看 “Computed value” 下方的 “Containing block” 提示。它会明确写出参照的是哪个元素、以及该元素的 padding-box 尺寸。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖视觉估算，尤其当父元素有 padding/border 时，
left: 0看起来“贴边”，其实离 content 左边已有 20px（来自 padding） - 想让
left: 0对齐 content 区左边缘？只能手动减去 padding：left: -20px（假设 padding-left 是 20px） - 更稳健的做法是：父元素加
position: relative，再用top: 0; left: 0;显式锚定，避免百分比带来的隐含依赖
left: 20%，以为是“父 content 宽的 20%”，结果却是“父 padding-box 宽的 20%”，而后者往往更大——尤其当 padding 较大时，偏移量会明显超出预期。 
