绝对定位子元素 top: 0 不贴边，因 transform 非 none 的父元素会创建新包含块，top 基于变形后内容区左上角计算；fixed 元素遇 transform 等属性会降级为相对该祖先定位；缩放元素点击区域与视觉位置错位，因事件坐标基于原始布局盒。
absolute 子元素在 transform 父容器里 top: 0 不贴边
因为父元素只要 transform 值不是 none，就会成为新的包含块（containing block），子元素的 top: 0 就是相对于这个“变形后的内容区左上角”计算的，而不是原始布局框。比如父容器 transform: scale(0.8)，子元素视觉上会看起来右下偏移。
常见干扰写法包括：transform: translateZ(0)、transform: translate(0)、transform: rotate(0deg)——这些看似无害，但全都会触发新包含块。
- 用 Chrome DevTools 的 “Computed” 面板检查子元素的
offsetParent，大概率指向那个带transform的祖先 - 临时给父元素加
outline: 1px solid red，对比子元素边框与 outline 的位置偏差 - 框架或 UI 库常悄悄加
translateZ(0)做 GPU 加速，这是最隐蔽的元凶之一
居中代码 top-1/2 -translate-y-1/2 为什么有时偏了
top-1/2 是基于父容器高度（受 padding、border、overflow 或 BFC 影响），而 -translate-y-1/2 是基于元素自身高度。两者基准不同，一旦父容器有意外尺寸干扰，视觉中心就错开。
更关键的是：如果父容器本身有 transform，它还会进一步扭曲这个“父容器高度”的计算结果——比如 scale(0.9) 后，top-1/2 实际取的是缩放后内容区高度的一半，不是原始值。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器没有未预期的
padding或border，必要时显式写box-sizing: border-box - 若父容器是
flex或grid，优先用justify-center items-center或place-items-center，绕过 absolute + transform - 在 Tailwind 中，
top-1/2 -translate-y-1/2等价于top: 50%; transform: translateY(-50%)，但后者只动自身，前者依赖父容器，风险更高
fixed 元素突然变成 relative 行为
这不是 bug，是 CSS 规范强制行为：position: fixed 本该相对视口定位，但只要任意祖先（哪怕隔了好几层）设置了 transform、filter、will-change 或 overflow: hidden，它就会被降级为相对那个祖先定位。
典型现象：导航栏固定在顶部，但滚动时跟着某个卡片一起动；或者弹窗随父容器缩放而位移。
- 调试方法：给疑似干扰的祖先临时加
outline: 1px solid red，观察 fixed 元素是否随它移动 - 修复只有两个选择：删掉无意义的
transform（比如纯为触发 GPU 加速的translateZ(0)），或用 JS 把 fixed 元素挂到<body>直接子级 - 注意
transform-origin不影响 fixed 降级逻辑，改它没用
点击区域和视觉位置不一致
浏览器派发 click 事件时，clientX/clientY 始终基于元素缩放前的原始布局盒计算，而 transform: scale() 只改变渲染，不改变 hit-testing 区域。结果就是你点在视觉按钮中心，实际坐标落在缩放前的左上角附近。
这个问题在移动端更明显，尤其搭配 touchstart 时，还可能因 touch-action 缺失导致事件拦截。
- 不要在缩放元素上直接绑事件，改用外层无
transform的容器代理 - 通过
getBoundingClientRect()获取容器位置，再用动态读取的缩放因子换算坐标（别硬编码scale值） - 必须设
touch-action: none或touch-action: manipulation，否则 iOS Safari 可能吞掉点击
transform 会同时改写定位上下文、坐标系、堆叠层级和交互边界——四个维度都得同步考虑，漏一个就出偏移。 
