最常见原因是绝对定位元素脱离了预期的定位上下文；需确保父容器设为position: relative，排查更外层已定位祖先及transform等隐式包含块影响，并确认未误用fixed/sticky。
如果 CSS 定位的元素（比如 position: absolute）没有随父容器一起移动，最常见原因是它**脱离了预期的定位上下文**——即没有正确绑定到你认为的“父容器”上。
检查父容器是否是“定位上下文”
绝对定位元素会相对于最近的已定位祖先元素（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）进行偏移。如果父容器的 position 是默认的 static（CSS 默认值），它就不会成为定位上下文，子元素就会往上继续找，甚至可能相对于 <body> 定位。
- 确认父容器设置了
position: relative（最常用且安全的选择） - 避免仅靠结构“看起来是父级”就假设它是定位上下文
- 用浏览器开发者工具（如 Chrome DevTools）选中该元素，查看“Computed”面板中的 “Containing block”，它会明确告诉你当前相对于哪个元素定位
警惕隐藏的定位祖先干扰
有时父容器之上还有其他已定位元素（比如某个布局 wrapper、modal 背景层、导航栏等），它们会“截获”定位关系，导致子元素跳过你的目标父容器，直接相对于更外层的祖先定位。
- 逐层向上检查 DOM 结构中所有祖先元素的
position值 - 临时给疑似干扰的祖先加
position: static !important（仅调试用），看是否恢复正常 - 必要时在目标父容器上显式添加
position: relative并确保它没有被覆盖
注意 transform 和 will-change 对定位上下文的影响
现代 CSS 中，transform、will-change、filter 等属性也会创建新的包含块（containing block），这可能意外替代 position: relative 的作用，导致定位行为异常。
立即学习“前端免费学习笔记（深入）”；
- 若父容器有
transform: translateX(0)或will-change: transform，它也可能成为定位上下文，但行为与position: relative不完全一致（例如不影响文档流尺寸） - 建议优先使用
position: relative明确建立定位上下文，避免依赖隐式创建 - 调试时可暂时移除这些属性，观察定位是否回归预期
固定/粘性定位需单独处理
如果子元素用了 position: fixed 或 position: sticky，它天生不随普通父容器滚动或移动：fixed 相对于视口；sticky 相对于最近的滚动祖先（而非定位祖先）。
- 需要随父容器移动 → 改用
position: absolute+ 正确定位上下文 - 若必须用
sticky，确保父容器是滚动容器（如设置了overflow: auto），且top/bottom值合理 - 避免对
fixed元素施加“随父移动”的期望，这是它的设计特性
不复杂但容易忽略。关键就是盯住“谁是 containing block”，而不是“谁在 HTML 里包着它”。
