绝对定位元素的定位基准是最近的已定位祖先元素（position为relative、absolute、fixed或sticky），若无则为初始包含块（视口）；父元素需设position: relative等非static值才能成为定位上下文，且top/left以该祖先的padding box左上角为起点。
绝对定位元素的定位基准是什么
绝对定位元素的定位基准，不是“父元素”，而是最近的已定位祖先元素（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）。如果没有这样的祖先，才相对于初始包含块（通常是视口，即文档根元素 html 的内容区）。
为什么设置 position: relative 在父元素上很关键
多数人想让子元素相对于“父容器”定位，却忘了父元素默认是 static —— 它不构成定位上下文。此时子元素的 top/left 会直接跳过它，往上找，最终可能贴到视口边缘。
- 必须显式给父元素加
position: relative（或其他非static值），哪怕它本身不需要偏移 -
relative不改变文档流位置，只创建新的定位上下文，是最安全的选择 - 不要用
position: absolute给父元素，否则它会脱离文档流，导致高度塌陷等问题
top/left 的计算起点在哪
起点是已定位祖先元素的 padding box 边缘（即内边距区域的左上角），不是 border 或 margin 边缘。
例如：
立即学习“前端免费学习笔记（深入）”；
.container {
position: relative;
padding: 20px;
}
.child {
position: absolute;
top: 0;
left: 0;
}
此时 .child 的左上角会紧贴 .container 的内边距起始点（也就是距离容器 border 内侧 20px 的位置）。
常见陷阱：父元素有 transform 时定位基准会变
如果父元素没有 position，但设置了 transform（如 transform: translateX(0)），它也会成为定位上下文 —— 这是 CSS 规范中容易被忽略的隐式行为。
- 这会导致
absolute子元素突然“相对于父元素定位”，而你完全没加position - 调试时注意检查祖先元素是否带
transform、filter、will-change等触发层叠上下文或定位上下文的属性 - 若不希望意外创建定位上下文，可加
transform: none显式重置
position 和 transform 状态，而不是只看 DOM 层级。 
