父元素设置 transform（如 rotate）后，absolute 子元素的 top/left 偏移失效是规范行为而非 bug：transform 非 none 会创建新包含块，子元素定位基准变为旋转后内容区左上角；修正方案是让子元素脱离该变形父容器，或确保其定位基准父元素无 transform。
父元素 transform: rotate() 后 absolute 子元素 top/left 偏移失效
不是渲染 bug，是规范行为：只要父元素 transform 值不为 none（包括 rotate(10deg)），它就创建新的包含块（containing block）和局部坐标系，子元素的 top、left 就不再基于原始布局框，而是基于**旋转后的内容区左上角**计算。
常见现象：子元素明明设了 top: 0; left: 0，却没贴住父容器视觉左上角；或居中逻辑 top: 50%; left: 50%; transform: translate(-50%, -50%) 完全错位。
- 用 Chrome DevTools 的 “Computed” 面板检查子元素的
offsetParent，大概率指向那个带transform的祖先，而非你写的父容器 - 临时给父元素加
outline: 1px solid red，再对比子元素边框与 outline 位置，能直观暴露“布局盒 vs 视觉盒”偏差 - 框架/组件库常悄悄加
transform: translateZ(0)触发 GPU 加速——这也足以触发该问题
为什么改 transform-origin 不能修复定位偏移
transform-origin 控制的是变形中心点（比如旋转轴心），不是定位参考原点。它影响 rotate、scale 的锚点，但不改变 position: absolute 子元素的计算基准——后者始终以父容器的**内容区左上角**为起点（旋转后的内容区）。
例如父容器设了 transform-origin: center; transform: rotate(10deg)，它的内容区视觉上绕中心旋转了，但子元素的 top: 0 仍从这个“旋转后的内容区左上角”开始量，而非原始矩形的左上角。
-
transform-origin默认是50% 50%，不是0 0，这点常被误记 - 写成
transform-origin: 0 0并不会让子元素恢复“原始像素对齐”，只是把旋转中心挪到左上角，错位依然存在 - 若父容器宽高不固定，用像素值如
transform-origin: 20px 30px易失准，百分比更稳
真正有效的修正方案：切断子元素对变形父容器的依赖
核心思路是让子元素不以那个旋转后的父容器为包含块。硬调 top/left 去补偿旋转角度成本极高（需 JS 解析 getComputedStyle(el).transform 矩阵并做逆运算），不推荐。
- 把子元素移出带
transform的父容器，改为相对于一个无变形的祖先定位（例如外层.wrapper { position: relative; }，子元素直接相对于它absolute） - 如果 DOM 结构不可变，给**真正想作为定位基准的父容器**显式加
position: relative，并确保它及所有上级祖先都不含任何transform - 想居中？用
top: 50%; left: 50%; transform: translate(-50%, -50%)是安全的——因为-50%始终相对于元素自身宽高，不依赖父容器是否旋转 - 要微调角标等小元素，优先用
top: 0; right: 0; transform: translate(50%, -50%)，这样右上角精准对齐父容器右上角顶点
哪些“看似无害”的 transform 也会触发偏移
所有非 none 的 transform 值都会触发新包含块，包括那些你认为“没效果”的写法：
-
transform: translate(0, 0)—— 仍创建新包含块 -
transform: translateZ(0)—— 常见于性能优化，但足以导致错位 -
transform: scale(1)—— 缩放系数为 1，但仍是非none值 -
transform: rotate(0deg)—— 同理，语法上已激活 transform 层级
最隐蔽的坑是：你没主动写 transform，但 CSS 框架、UI 库、甚至某些 autoprefixer 插件会自动注入 translateZ(0) 或 backface-visibility: hidden，间接触发该行为。调试时务必检查 computed styles 中的 transform 字段是否为 none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
