绝对定位元素找不到预期父级，是因为它只认最近的已定位祖先（position为relative/absolute/fixed/sticky），而非视觉父级；若所有父级均为static，则回退至html，导致偏移。
为什么绝对定位总找不到你想要的父级？
因为 position: absolute 不认“视觉上的父级”，只认“最近的已定位祖先”——也就是 position 值为 relative、absolute、fixed 或 sticky 的那个祖先元素。如果所有父级都是默认的 static，它就会一路往上直到 <html>，结果就是“飘到视口左上角”。
- 用 Chrome DevTools 的 “Computed” 面板看子元素的
offsetParent，它显示的是实际参照对象，不是 DOM 树里看着最近的那个 - 别只靠 HTML 结构判断；哪怕
<div class="wrapper"><div class="parent"><div class="child"></div></div></div>，如果.wrapper有position: relative而.parent没设，.child就会相对于.wrapper定位 - 框架（如 React/Vue）生成的中间容器可能悄悄加了
position: relative，或重置了样式，导致你预期的父级被跳过
给哪个父级加 position: relative 才对？
必须加在**直接包裹目标子元素的那个父级**上，且该父级需满足：有明确尺寸、未塌陷、未被 transform 干扰。加错层级或加在空容器上，等于没加。
- 加之前先确认父级真实高度：用 DevTools 高亮盒模型，看
height和padding是否为 0；若父级只有position: absolute子元素，它大概率高为 0，需补min-height或padding - 如果父级是 Flex/Grid 容器，加
position: relative完全没问题，不影响justify-content或grid-template行为 - 避免在带
transform的父级上加——哪怕只是transform: translateZ(0)，也会创建新包含块，让top/left计算基准偏移
top/left 是从哪开始算的？
从父级的 **padding box 左上角**起算，不是 border box，也不是 content box。这意味着父级的 padding 会直接影响定位起点。
-
top: 0; left: 0→ 子元素上边框紧贴父级 padding 区域的顶边，离父级 border 还有padding-top的距离 - 想让子元素贴父级 border？要么删掉父级
padding，要么用top: -10px抵消（但耦合强，不推荐） - 父级用了
box-sizing: border-box不影响这个规则——padding box的定义与box-sizing无关
哪些情况会让参照关系“失效”？
不是加了 position: relative 就万事大吉。常见干扰源比想象中多，且很难一眼看出。
立即学习“前端免费学习笔记（深入）”；
-
transform、filter、will-change都会创建新的层叠上下文和定位上下文，使子元素参照该父级，但计算方式已变（比如旋转后top: 0不再是原始左上角） - JS 动态修改了父级的
position值（比如某些 UI 库在折叠时设为static），可在 DevTools 中右键父级 → “Break on” → “Attribute modifications” 捕获 - 父级被
overflow: hidden裁剪，但子元素仍按原尺寸定位——看起来“被切掉”，其实是定位没错，只是溢出不可见
