父元素必须显式设置position: relative才能成为absolute子元素的定位上下文；若未设置，子元素将向上查找最近的定位祖先，导致定位异常。
父元素没设 position: relative，子元素 absolute 就会往上找最近的定位祖先
这是最常见原因：子元素用了 position: absolute，但父元素只是普通文档流（static），浏览器就会跳过它，继续向上查找——可能落到 body 或某个意外的 relative / fixed 祖先上，导致位置飘移。
解决办法很简单：给父元素显式加 position: relative（哪怕不需要偏移，也必须设）。
-
relative不改变文档流位置，只创建新的「定位上下文」 - 不需要配
top/left等偏移值，空的position: relative就够了 - 避免用
position: static（这是默认值，不能当定位上下文）或position: unset
父元素有 transform、filter 或 will-change，也会创建定位上下文
现代 CSS 中，某些属性会让元素隐式变成「包含块」（containing block），效果等同于 position: relative。比如：
-
transform: translate(0)—— 常见于为了开启硬件加速而滥用 filter: blur(1px)will-change: transform
这时即使没写 position: relative，子元素 absolute 也可能相对它定位。但行为不稳定，尤其跨浏览器时容易出错。建议统一显式声明 position: relative，不要依赖隐式触发。
立即学习“前端免费学习笔记（深入）”；
子元素 absolute 的 top/right/bottom/left 值是相对于父元素内边距（padding）边缘计算的
不是相对于 border，也不是 content-box。这意味着如果父元素有 padding: 20px，且子元素设了 top: 0; left: 0，它会紧贴父元素的 padding-top 和 padding-left 边缘，而不是左上角顶点。
如果你需要对齐到 border 或 content 区域，可考虑：
- 把
padding移到子元素上（如子元素设margin: -20px） - 改用
inset（CSS Logical Properties，支持较新） - 或者用
box-sizing: border-box配合调整数值
父元素高度为 0 或未设置高度，absolute 子元素可能“消失”或定位异常
position: absolute 的子元素会脱离文档流，不参与父元素高度计算。如果父元素没有其他内容、固定高度或 min-height，它的高度可能是 0，看起来就像子元素不见了——其实它还在，只是从可视区域外开始定位。
排查方法：
- 给父元素临时加
background: red，看是否真有尺寸 - 检查父元素是否被
overflow: hidden截断 - 确认子元素的
top/left没有设成负值过大（比如top: -1000px） - 必要时用
min-height: 1px或伪元素撑开父容器
.parent {
position: relative; /* 必须有 */
min-height: 1px; /* 防止高度塌陷 */
background: #f0f0f0;
}
<p>.child {
position: absolute;
top: 8px;
left: 12px;
}父元素的定位上下文创建和子元素的脱离流行为，这两点一旦混淆，调试起来特别耗时。很多人卡在“明明写了 relative 却不管用”，最后发现是父元素被某个 CSS 框架重置了 position，或者被更上层的 transform 干扰了包含块判断。
