CSS子元素绝对定位为何不跟随父元素？
父元素未设position: relative时，子元素的absolute定位会向上查找首个非static祖先；即使设了relative，若父或祖先有transform/filter/will-change，也会创建新包含块导致定位偏移。
父元素没设 position: relative，子元素根本“不认它”
子元素加了 position: absolute 却不随父元素移动，最常见原因是父元素压根没成为定位上下文。CSS 规范里没有“视觉父元素”这个概念，position: absolute 只向上查找 position 值为 relative、absolute、fixed 或 sticky 的祖先——如果父元素是默认的 static，它就等于不存在，子元素会继续往上找，甚至落到 <html> 上。
用开发者工具选中子元素 → 切到 “Computed” 面板 → 看 offsetParent 显示的是谁，比看 HTML 结构更准。
- 临时给父元素加
outline: 2px solid red，确认它真渲染出了尺寸；如果高度为 0（比如内部全是absolute子项），那它逻辑上存在，但视觉上“没框” - 别指望
display: flex或display: grid自动让父容器变成参照物——它们和定位规则完全无关 - 全局重置样式如
* { position: static !important; }会静默干掉你的声明，务必在 Computed 里确认position是relative且没被划掉
父元素或中间祖先用了 transform，定位基准悄悄变了
即使父元素写了 position: relative，只要它或某层祖先设置了 transform（哪怕只是 transform: translateZ(0)），就会强制创建新的包含块。此时子元素的 top/left 就不再以你写的那个 relative 父元素为原点，而是以这个带 transform 的元素为基准——而它的坐标系可能已被偏移、缩放甚至旋转。
逐层向上检查所有祖先的 Computed transform 值，必须是 none 才安全。某些 UI 库、动画组件、CSS-in-JS 工具会自动注入 translateZ(0) 来触发 GPU 加速，非常隐蔽。
- 临时注释掉
transform相关样式，看定位是否立刻恢复正常——这是最直接的验证方式 -
filter、will-change同样会创建新包含块，干扰定位参考 - 不要以为“只加了
translateZ(0)就没事”，它和translateX(0)一样有效（也一样危险）
父元素在做 left/top 动画，子元素“掉队”了
如果父元素自己用 left 或 top 做位移动画，position: absolute 子元素不会跟着动。因为 absolute 的偏移值（如 top: 10px）始终相对于定位上下文的初始位置计算，而 left/top 动画会触发重排，不改变该上下文本身的位置。
正确做法是：确保父元素已设 position: relative，然后统一用 transform: translate() 动画整个父容器。这时子元素的 top/left 仍生效，但它是相对于父元素当前 transform 后的位置计算的。
- 避免在子元素上混用
transform和top/left，容易产生意外交互 - 如果子元素自己也要微调，优先用
transform: translate()，而不是再加top - 移动端注意：iOS Safari 中，
transform动画若配合键盘弹出，有时会让absolute元素卡在错误位置
overflow: hidden 没裁剪到子元素，其实是参照错了对象
你以为给父元素加了 overflow: hidden 就能挡住 absolute 子元素，结果它还是露出来——大概率是因为子元素压根没以这个父元素为包含块。浏览器只对「既是定位上下文，又设置了 overflow: hidden」的容器执行裁剪。
也就是说：.parent { overflow: hidden; } 完全无效；必须写成 .parent { position: relative; overflow: hidden; }。否则裁剪对象可能是 <body>，而子元素早就不在它里面了。
- Flex/Grid 容器加了
overflow: hidden也一样失效，必须显式加position: relative - 想让 tooltip、下拉菜单“破框而出”，别硬调
z-index，那是徒劳；真正有效的做法是把元素挂到<body>下，用 JS 动态算top/left - 现代方案可考虑
overflow: clip（Chrome 119+、Firefox 111+），语义更干净，且不隐式创建层叠上下文
定位链不是靠 DOM 层级猜出来的，是浏览器按规范逐层向上匹配的。最容易被忽略的，是以为“写了 position: relative 就完事”，却没检查它是否真生效、是否被 transform 或其他属性劫持了定位上下文。
