绝对定位的top/left基准点是包含块的border-box左上角，而非padding内侧；父元素需显式设position:relative才能成为包含块；width:100%包含padding是规范行为。
它根本没“失效”——只是你误把定位原点当成了 padding 内侧，而 top/left 实际起点永远是父元素的 border-box 左上角。
absolute 定位的 top/left 基准点不是 padding 内侧
父元素设了 padding: 20px，子元素写 top: 0; left: 0;，结果子元素离内容区顶部有 20px 空隙？这不是 padding “失效”，而是它本就不参与定位计算。绝对定位的偏移量始终从包含块（containing block）的 border 外边缘起算，和 padding 值无关。
-
box-sizing: border-box不影响这个行为——它只控制父元素自身宽高的计算方式 - DevTools 的
offsetTop/offsetLeft显示的数值，就是相对于 border-box 左上角的真实像素距离 - 想让子元素贴着 padding 内侧，只能手动补偿：
top: 20px（对应padding-top），left: 20px（对应padding-left）
父元素根本没成为包含块：position: static 是隐形杀手
你以为的“父元素”在 CSS 定位规则里可能压根不存在。如果父元素是默认的 position: static，浏览器会忽略它，继续向上查找最近的 position: relative、absolute、fixed 或 sticky 祖先；找不到就落到视口。
- 用 DevTools 查父元素的 Computed
position，确认值是relative且没被划掉 - 常见干扰：全局重置规则如
* { position: static !important; }，或 UI 库悄悄注入的transform: translateZ(0) -
display: flex或display: grid的父容器，不会自动变成定位上下文——必须显式加position: relative
width: 100% 在 absolute 下包含 padding，不是 bug 是规范
子元素设了 position: absolute; width: 100%，结果宽度撑到了父元素 border 边缘，把 padding 也包进去了？没错，这就是规范行为：绝对定位元素的 width: 100% 是相对于包含块的 content box 宽度 + padding + border 计算的（即整个 box-sizing 区域）。
- 这不是“padding 生效了”，而是
width: 100%的参照系本身就含 padding - 若要填满 padding 内侧区域，改用
left: 0; right: 0;（配合top/bottom）更可靠 - 对遮罩层等场景，
left: 0; right: 0; top: 0; bottom: 0;比width: 100%; height: 100%更干净
最常被忽略的一点：当你反复调 padding 却没效果时，大概率问题不在 padding 本身，而在祖先链某一层悄悄加了 overflow: hidden 或 transform，它们会无声创建新的包含块，让你的 position: relative 彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
