不会。css transform完全不影响盒模型的布局占位，因其仅作用于渲染层，不修改margin box尺寸和位置，dom布局树中元素位置纹丝不动，offsetwidth和getboundingclientrect()仍返回原始值。
不会。CSS transform 完全不影响盒模型的布局占位，这是它的设计本质，不是 bug，也不是浏览器差异。
为什么 transform 旋转/缩放后元素还压着下面的文字
因为 transform 只作用于渲染层（paint/composite 阶段），不修改元素的 margin box 尺寸和位置。DOM 布局树里它纹丝不动，offsetWidth、getBoundingClientRect() 返回的仍是原始值。
- 常见表现：
transform: rotate(30deg)的按钮盖住下方文字，但 hover 区域仍在原位置 - 父容器高度塌陷：子元素仅靠
transform位移或旋转，不会撑开父级高度 - 内联元素（如
<span></span>）直接加rotate()常无效，因它默认没有独立盒模型边界
transform-origin 改变支点但不改变占位
transform-origin 决定 rotate()、scale() 等函数绕哪一点执行，但它只影响变换矩阵计算，不改变元素本身的 margin box 位置和尺寸。
- 默认
50% 50%是按border-box计算的几何中心，含padding和border，不是内容区中心 - 设成
top left或0 0会让旋转后视觉“飞出去”，但占位框仍卡在左上角原点 - 这个支点本身不占空间、不触发重排，只是数学上的轴心
fixed 元素错位往往是因为祖先有 transform
只要任意祖先元素（不一定是直接父级）的 transform 计算值不是 none，position: fixed 就会退化为相对于该祖先定位——这是 CSS 规范行为。
- 常见诱因：
transform: translateZ(0)、will-change: transform、甚至filter: blur(0) - 第三方组件（如 Ant Design Drawer）可能悄悄加了
transform来触发硬件加速，你根本没写但它写了 - 用 Chrome DevTools 的 Computed 面板逐层查
transform值，别只信源码里“我没写”
真正麻烦的不是理解“不占位”，而是它和视觉、交互、fixed 定位、父容器高度这些场景交织在一起时，错位表现五花八门。你得习惯先打开 Computed 面板确认每一层的实际计算值，而不是凭直觉调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
