先记住这个答案
当一个元素的 transform 属性不为 none 且它是最近的包含块生成器时，它才会为该 absolute/fixed 后代建立包含块。绝对定位子元素的 left/top 和百分比宽度、高度都以这个祖先的 padding box 边缘为基准，而不是初始包含块或更远的定位祖先。若同时存在多个创建包含块的祖先，选择最近的那个。这个效果即使 transform 只做零位移也会触发，因为只要值非 none。
- transform 非 none 可生成包含块（若为最近祖先）
- 包含块基于该元素的 padding box
- 与定位祖先并存时取最近者
规范如何接管包含块归属
CSS 在计算 absolute 后代的包含块时，会扫描祖先链。任何 transform 属性不是 none 的元素都会候选，与 position 非 static 的元素处于同一优先级。最终取最近的候选者，因此即使祖先只有 transform: rotate(0deg)，只要它比外层 position: relative 元素更近，就覆盖外层的定位基准。
一旦建立，包含块是 transform 元素的 padding box。子元素的 left/top 相对该 padding box 的边框内侧计算，百分比宽度也基于 padding box 宽度而非 content box。padding 越厚，子元素的 100% 越宽，这会让基于 content width 的旧布局产生明显位移。
为 GPU 合成加 transform，tooltip 突然错位
一个物品卡片内部有一个绝对定位的 tooltip，卡片本身设置了 position: relative，tooltip 用 left: 100% 贴在卡片右侧。为了做进场动画，开发者在卡片内又加了一个用于缩放的 wrapper，并给它设置了 transform: scale(0.8)。上线后发现 tooltip 的位置不再贴合卡片：因为 wrapper 是比卡片更近的包含块生成器，包含块从卡片变成了 wrapper 的 padding box，left: 100% 现在基于 wrapper 的宽度计算，视觉上被推到了 wrapper 外部。
修复时要让包含块停留在预期层级。如果动画必须保留在 wrapper 上，可以在 wrapper 和 tooltip 之间再插入一个带 position: relative 的隔离层，使 tooltip 以该隔离层为包含块，而不被 wrapper 的 transform 接管；或者将 tooltip 移到 wrapper 外层，继续以卡片为包含块。若改用 opacity 等不影响包含块的动画属性，则不会引发此类定位变化，但使用 will-change: transform 仍可能触发包含块生成，所以必须谨慎评估。
定位祖先与 transform 祖先共存时的取舍及失效条件
这个行为在 transform 为 none 时完全不触发，但只要属性值非 none，即使 rotate(0deg) 也会生效。will-change: transform 和 content-visibility: auto 也会建立包含块，即使当前没有渐变变换。另外不同浏览器对 perspective 和 filter 是否作为包含块存在不一致，MDN 也标注了潜在差异，跨浏览器前需要实测。
当祖先链里同时有 transform 元素和更近的 position: relative 元素时，规范要求选最近的包含块生成器。如果设计上必须同时保留两者，不能只移动按钮而不检查外层距离。给期望的祖先加 position: relative 并提升 z-index 可能无效，因为 transform 元素依然可能更近。终极办法是把 transform 和需要定位的项放在同一个元素，或用结构性隔离（如新的 BFC），但 BFC 不影响包含块来源。
容易答错的地方
- 认为 transform 只是视觉变化不影响布局
- 实际上 transform 会改变绝对后代的包含块，从而影响它们的坐标和百分比尺寸，这是布局层面不可忽略的影响，不是纯合成效果。修改 transform 可能触发绝对定位重排，而不仅是重绘。
- 认为只有 position 非 static 才创建包含块
- filter、transform、perspective、will-change 等属性同样能创建包含块。
position: static的 transform 元素也能作为包含块，因此不能只按 position 判断。
面试官还会怎么问？
一个元素有 transform，同时它的父级有 position: relative，谁优先？
按最近者优先。如果 transform 元素比 relative 父级更接近子元素，则以 transform 元素的 padding box 为包含块；反之则以相对定位父级。可以用 DevTools 查看计算后的结果。
transform 为 rotate(0deg) 也有效吗？
有效。只要属性值不是关键字 none，任何函数值都会触发包含块建立，包括 rotate(0deg)、scale(1) 和 translate(0) 等无实际位移的变换，因为判定依据是“非 none”而不是实际变形程度。
fixed 定位也会受 transform 影响吗？
会。规范中 fixed 后代的包含块若存在 transform 祖先，则改为该祖先的 padding box，不再对应 viewport。这是 fixed 元素被transform 祖先“固定失效”的常见原因，调试时需检查祖先链。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。