transform会使absolute子元素的top/left相对于父容器transform后的新局部坐标系原点（默认transform-origin: 50% 50%）计算，而非原始border box；该坐标系受transform-origin、缩放等影响，且会触发新层叠上下文。
transform 会让 absolute 子元素的 top/left 相对于谁计算？
不是相对于父容器的 border box，而是相对于父容器 transform 后的新局部坐标系原点。这个原点默认在 transform-origin: 50% 50%，也就是父元素中心——哪怕你没改过这个值。
常见现象：父元素加了 transform: scale(0.8)，子元素写 top: 0; left: 0;，结果没贴到左上角，而是“缩进”了一段距离。原因就是：子元素的 0, 0 是相对于缩放后的父容器边界算的，而缩放后整个父容器的宽高变小了，它的左上角物理位置其实没变，但坐标系单位长度变了。
- 只要父元素有任意
transform（哪怕只是translateZ(0)），它就创建了新的局部坐标系 - 子元素的
top/left偏移量，是按这个新坐标系的尺寸和方向计算的，不是原始文档流 - 如果父元素还设置了
transform-origin: bottom right，那子元素的top: 0; left: 0实际会落在父容器右下角附近
为什么 z-index 在 transform 父容器里突然不跨层级生效了？
因为 transform（非 none）会自动触发新的层叠上下文（stacking context），而 z-index 的作用域被锁死在这个上下文内部。
典型错误：两个兄弟弹窗，一个加了 transform: scale(0.95) 做动效，另一个没加；前者明明 z-index: 1000，却被后者（z-index: 999）盖住——不是数值小，是它们根本不在同一个比较池里。
- 父容器一旦有
transform，它的所有子元素的z-index只能互相比较，无法和外部同级元素比 -
opacity: 0.99、filter: blur(1px)、will-change: transform也会触发同样效果 - 调试时打开 Chrome DevTools 的
Layers面板，能看到被transform单独分层的区域
怎么让 absolute 子元素真正“贴住”父容器左上角？
别依赖 top: 0; left: 0，改用 transform 对齐自身，把定位逻辑从父坐标系中解耦出来。
最稳写法：position: absolute; top: 0; left: 0; transform: translate(0, 0); —— 表面看没动，实则强制子元素以自身为原点重新对齐，绕过父级 transform 坐标系偏移。
- 如果父元素有
transform-origin偏移，更保险的是显式重置：transform: translate(0, 0) translateZ(0) - 想居中？用
top: 50%; left: 50%; transform: translate(-50%, -50%)，这个组合不受父级transform影响，因为它是基于自身尺寸计算的 - 避免给父容器加无意义的
transform: translateZ(0)来“提层”，它只会新建上下文，让z-index更难管
absolute + transform 混用时，哪些操作会悄悄新建堆叠上下文？
任何非 none 的 transform 值都会，包括看起来“没效果”的写法。
这些都算：transform: translateX(0)、transform: rotate(0deg)、transform: scale(1)、transform: translateZ(0)。浏览器不看数值是否为零，只看声明是否存在且非 none。
- 动画中用
@keyframes控制transform，即使起始帧是transform: none，只要中间帧有值，整个元素生命周期内都处于新层叠上下文中 - 用
will-change: transform提前告知浏览器要动，也会立即触发新上下文 - 检查是否误加了
transform的地方：CSS reset、UI 组件库默认样式、第三方插件注入的 class
实际布局中，最常被忽略的不是怎么写，而是“父容器有没有 transform”这件事本身——它不像 position: relative 那样显眼，却会静默改写整个子树的定位与层叠逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
