绝对定位元素的top/left偏移起点永远是最近已定位祖先元素的border box左上角，即border外边缘；加position:relative仅使其成为定位上下文，不改变该原点；需手动补偿padding或采用结构分离方案实现视觉对齐。

绝对定位元素的 top/left 偏移起点，永远是最近已定位祖先元素的 border box 左上角（即 border 外边缘），不是 padding 内侧，也不是 content 区。这不是 bug，是 CSS 规范强制定义的行为——它压根不“看”父容器的 padding。

为什么加了 position: relative 还是没对齐 padding 内侧

给父容器加 position: relative 的唯一作用，是让它成为“已定位祖先”，从而把子元素的定位参考系从 body 拉回来。但它不会改变定位原点：起点仍是父容器的 border box 左上角，而非 padding 内侧。

• 父容器有 padding-top: 20px + border: 2px solid，那么 top: 0 就会让子元素紧贴 border 顶边，视觉上离内容区顶边有 22px 距离
• box-sizing: border-box 对定位原点完全无效——它只影响宽高计算逻辑
• 如果父容器没设 position: relative，子元素会回溯到 body，而 body 默认有 margin: 8px，造成更大偏移

如何让绝对定位元素“看起来”贴合 padding 内侧

没有 CSS 属性能切换定位起点，只有两种可落地的方案：

• 手动补偿：父容器 padding: 20px 16px 12px 24px，子元素就写 top: 20px; right: 16px; bottom: 12px; left: 24px；注意方向严格对应，响应式下需配合 JS 或 CSS 变量动态更新
• 结构分离（推荐）：外层容器只设 position: relative 且 padding: 0；内层容器负责视觉留白（padding/border）；绝对定位子元素挂在外层，用 top: 0; left: 0; 即可精准贴合内层可视边界

inset、width: 100% 和 box-sizing 都不能绕过这个限制

inset: 0 等价于 top: 0; right: 0; bottom: 0; left: 0，起点仍是内容区左上角，结果是子元素撑满内容区，被父容器的 padding “缩进”；width: 100% 计算的是包含块的 width，而包含块宽度不含 padding，但它的左上角起点在 border 外沿，所以实际渲染仍会错位。

立即学习“前端免费学习笔记（深入）”；

• width: 100% 在父容器有 padding 时，不会自动减去 padding 值
• box-sizing 只影响元素自身 width/height 如何分配给 content/padding/border，对定位原点零影响
• 用 outline: 1px solid red 临时调试，能清晰看到 border box 实际位置，比靠眼睛猜更可靠

真正容易被忽略的点是：你无法用任何 CSS 属性“说服”浏览器把定位原点改成 padding 内侧。所有稳定方案，都建立在明确谁提供定位上下文、谁控制视觉留白的基础上——结构分离之所以可靠，是因为它把“定位逻辑”和“视觉样式”彻底解耦，而不是在同一个元素上反复叠加 hack。