父元素需设position: relative建立定位上下文，动画应使用transform而非left/top，如此absolute子元素才能随父元素整体移动且保持相对偏移。
父元素用 absolute 定位子元素时，若父元素本身在做动画（比如 transform 位移），子元素不会自动跟随——因为 absolute 是相对于**最近的已定位祖先**（即设置了 position: relative/absolute/fixed/sticky 的祖先）来计算位置的，而该祖先若没参与动画，子元素就“卡死”在文档流中的原始偏移位置。
让父元素成为定位上下文
确保父元素设置了 position: relative（或其他非 static 值），这样子元素的 absolute 才真正相对于它定位。
- 不加
position的父元素，absolute子元素会往上找，可能脱离预期容器 -
position: relative最常用，不影响布局流，只建立定位上下文
用 transform 动画父元素，而非 left/top
如果父元素用 left 或 top 动画，会导致重排（reflow），且 absolute 子元素仍按原始 offset 计算，视觉上“掉队”。改用 transform: translate()：
-
transform触发合成层，性能更好，且整个元素（含子元素）作为整体被移动 - 子元素的
absolute偏移值（如top: 20px）依然生效，但它是相对于父元素当前transform后的位置计算的 - 示例：
.parent { position: relative; transform: translateX(100px); } .child { position: absolute; top: 10px; left: 10px; }→ 子元素最终出现在父元素平移后区域的 (10px, 10px) 处
避免在子元素上混用 transform 和 absolute 偏移
如果子元素自己也用了 transform，再叠加 top/left，容易产生意外交互。建议统一用一种方式定位：
立即学习“前端免费学习笔记（深入）”；
- 纯视觉微调：优先用
transform: translate()，避免触发重排 - 需响应布局变化（如自适应间距）：保留
top/left，但确保父元素transform动画正常 - 两者混用时，注意
transform会创建新的包含块，可能影响absolute的参考点
基本上就这些。关键就是两点：父元素要 position: relative 建立上下文，动画全交给 transform 驱动——子元素自然跟着走，不复杂但容易忽略。
