absolute定位只认最近的已定位祖先（position为relative/absolute/fixed/sticky），而非DOM结构上的父级；Chrome DevTools中offsetParent显示的才是真实参照物，需验证其position值未被覆盖、未受transform等干扰、有实际尺寸且显式设为relative。
为什么absolute总不认你写的父级？
它根本不是“不认”，而是严格按规范找：只看最近的已定位祖先（position值为 relative、absolute、fixed 或 sticky）。哪怕 DOM 结构里隔着三层，只要中间某一层悄悄加了 position: relative（比如 UI 库组件、动画 wrapper、甚至 transform: translateZ(0)），子元素就立刻改换门庭。
- 用 Chrome DevTools 选中目标元素 → “Computed” 面板搜
offsetParent，它显示的才是真实参照物，不是你 HTML 里写的那个.parent - 临时给所有可疑祖先加
outline: 1px dashed #f00，看哪个红色框真正框住了你的定位区域 - 别信 class 名——
.modal-content看起来像容器，但若它没设position: relative，而外层.modal-overlay设了，那你的弹窗按钮就相对于遮罩层定位
怎么确认父级真的成了定位上下文？
写了 position: relative 不等于生效。必须逐项验证：
- 在 “Computed” 面板检查该父元素的
position值是否为relative，且未被划掉（没被!important覆盖或重置规则干掉） - 检查它是否被
transform、filter或will-change干扰：哪怕只是transform: translateZ(0)，也会创建新包含块，让子元素绕过它 - 用 DevTools 高亮盒模型，确认父级有真实高度和宽度；如果
height: 0且内部全是position: absolute子项，它逻辑上存在，但无法提供稳定基准 - 若父级是 Flex 或 Grid 容器，
display: flex本身不构成定位上下文——必须显式加position: relative
inset 和 calc() 能绕过参照物漂移吗？
能，但适用场景有限：
-
inset（如inset: 10px auto auto 20px）不依赖“找祖先”，而是基于元素原本在文档流中的位置做偏移，天然避开定位上下文漂移问题。但它要求父级已设position: relative才能生效，且兼容性限于 Chrome 87+、Firefox 63+、Safari 14.1+ -
calc()适合需要精确补偿自身尺寸的场合，比如居中：left: calc(50% - 60px)（假设宽 120px），比transform: translate(-50%)更可控，尤其当父级有padding或子元素带border时 - 注意：二者都不能替代
position: relative—— 如果父级没设，inset会回退到视口，calc()的百分比基准也依然浮动
overflow: hidden 为啥裁不掉 absolute 元素？
因为裁剪只对「既是定位上下文，又设置了 overflow: hidden」的容器起作用。常见失效链：
立即学习“前端免费学习笔记（深入）”；
- 父容器只写了
overflow: hidden，但仍是position: static→ 子元素参考更上层，裁剪对象错位 - 父容器是 Flex/Grid，没加
position: relative→ 即使触发了 BFC，也不构成包含块，overflow对 absolute 无效 - 父容器高度塌陷（全子项 absolute）→
overflow: hidden有，但容器本身没尺寸，裁剪无从谈起
真正有效的写法只有这一种：.parent { position: relative; overflow: hidden; }，缺一不可。如果要让 tooltip 向外延伸，别硬调 overflow，直接把元素移出父级 DOM，挂到 body 下并用 JS 动态定位。
最麻烦的从来不是数值写错，而是你根本不知道 top: 10% 这个 10%，到底除的是谁的高度。
