transform 会改变定位基准，因为非 none 的 transform 值会强制创建新包含块和层叠上下文，使 absolute 元素相对于它而非预期父容器定位。
当使用 position: absolute 时，元素的定位基准（即“包含块”）不是父元素，而是最近的、具有定位属性（position 为 relative、absolute、fixed 或 sticky）的祖先元素。但如果该祖先元素同时设置了 transform（哪怕只是 transform: translate(0)），它就会强制创建一个新的包含块，导致 absolute 元素意外地相对于它定位，而非你预期的父容器。
为什么 transform 会改变定位基准？
CSS 规范规定：只要一个元素的 transform 值不为 none，它就会生成一个新的层叠上下文（stacking context），同时也成为一个新的包含块（containing block），用于其内部 position: absolute 子元素的定位计算。这与 position: relative 的行为不同——后者只创建包含块，不自动创建层叠上下文。
如何快速识别问题根源？
- 检查 absolute 元素的所有祖先元素，从父级开始逐层向上，看是否有任意一层设置了
transform（包括scale()、rotate()、translate()、translateZ()等） - 特别注意框架/库自动添加的样式（如某些动画库、UI 组件、或 CSS-in-JS 工具可能悄悄加了
transform: translateZ(0)来触发硬件加速） - 用浏览器开发者工具的“Computed”面板，搜索
transform，查看是否被继承或显式设置
解决方法：绕过 transform 干扰
-
移除不必要的 transform：如果只是为了触发 GPU 加速或修复闪烁，优先考虑用
will-change: transform替代，或确认是否真有必要 -
把 absolute 元素移到 transform 祖先之外：将需要绝对定位的元素“提级”，使其父级不再受 transform 影响（例如挂到
body下，并用 JS 动态计算位置） -
用 position: relative + padding/margin 模拟 transform 效果：对只需位移的场景，改用
top/left配合position: relative更可控 -
显式指定定位上下文：在你真正想作为基准的父元素上加
position: relative，并确保它上方所有祖先都不含 transform
预防建议：团队协作与代码规范
在项目中统一约定：避免在布局容器上随意添加 transform；若必须使用（如交互动画），应在独立的 wrapper 元素中进行，并让内容区域保持“干净”。可借助 ESLint 插件或 CSS Linter（如 stylelint）配置规则，检测 transform 与 position: absolute 共存的高风险组合。
