父元素设置 position: relative 后成为包含块，absolute 元素的定位起点从其内容区域开始，受 padding 影响向内偏移；若需贴边则用负值补偿。
当使用 position: absolute 的元素与其父元素的 padding 结合时，定位的起点会受到父元素是否设置了 position: relative（或其它包含块条件）以及 padding 值的影响。理解它们之间的关系关键在于搞清楚包含块（containing block）和偏移起点。
1. 父元素是包含块的前提
只有当父元素设置了 position: relative、absolute、fixed 或 sticky 时，它才会成为子元素绝对定位的包含块。此时，子元素的 top、right、bottom、left 才会相对于这个父元素进行计算。
.parent {
position: relative;
padding: 20px;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.child {
position: absolute;
top: 0;
left: 0;
}
此时，.child 的左上角会出现在 .parent 内容区域的左上角，也就是在 padding 内侧的起点，不会覆盖 padding 区域。
2. absolute 元素的偏移从哪里开始？
绝对定位元素的 top 和 left 是相对于包含块的内容区域边缘开始计算的，而不是 border-box 或 padding-box 外缘。
立即学习“前端免费学习笔记（深入）”；
这意味着：
- 如果父元素有
padding: 20px - 且子元素设置
top: 0; left: 0; - 那么子元素将出现在父元素内容区的左上角 —— 也就是距离父元素外框 20px 向内的位置
换句话说：absolute 元素不会覆盖父元素的 padding 区域**，它的定位起点被“推入”了内容区域。
3. 如何让 absolute 元素贴着父元素边缘？
如果你想让 absolute 元素从父元素的 border-box 起点开始定位（比如覆盖 padding），你需要手动补偿 padding 值。
例如，父元素 padding: 20px，你想让子元素从真正的左上角开始：
.child {
position: absolute;
top: -20px;
left: -20px;
}
或者如果你希望它刚好在 padding 内部对齐，则保持 top: 0; left: 0; 即可。
4. 实际布局中的常见用法
这种机制常用于以下场景：
- 图标或删除按钮覆盖在卡片右上角：设置
top: 0; right: 0，它会出现在内容区右上角，若想更靠外，就用负值 - 全屏遮罩：设置
top: 0; left: 0; right: 0; bottom: 0;，它会填满内容区域，不包括 padding - 需要撑满整个父容器（含 padding）？可以使用
inset: 0并配合调整或重置父级 padding
基本上就这些。记住：absolute 定位基于包含块的内容区域，padding 会把起点往里推。要突破 padding 限制，就用负偏移。
