一旦父级元素应用了 transform（即使是 transform: translate(0, 0);），它就会变成其子级 position: fixed 元素的包含块（Containing Block）。这意味着该子元素将相对于这个父元素定位，而不是相对于传统的浏览器视口（Viewport）。
为什么会这样？
根据 W3C 的规范，当一个元素的 transform 属性值不为 none 时：
- 它会为
position: fixed的后代创建一个包含块。 - 它会创建一个新的堆叠上下文（Stacking Context）。
这种情况下的表现：
- 定位参考点变化 ：普通的
fixed元素参考的是屏幕。而在transform容器内部，top: 0; left: 0;会对齐到该容器的左上角。 - 滚动同步 ：通常
fixed元素不随页面滚动，但如果它被限制在了一个transform容器里，它会随着这个容器一起滚动。
除了 transform，还有哪些属性会"坑"掉 fixed？
不仅仅是 transform，以下属性也会导致子元素的 position: fixed 失效（将其"降级"为类似于 absolute 的表现）：
filter不为noneperspective不为nonebackdrop-filter不为nonewill-change设置为上述属性contain属性设置为paint或layout
有什么解决办法吗？
如果你必须在经过变换的容器里实现"真正的"视口定位，通常有以下几种方案：
- 移动 DOM 结构（最常用） ： 将需要
fixed的元素移出transform容器，直接放在<body>下。这也是为什么很多 UI 组件库（如 React 的 Ant Design 或 Vue 的 Element Plus）的 Modal/Tooltip 都会使用 Portal (传送门) 技术将弹窗挂载到body上的原因。 - 避免在祖先元素上使用 transform ： 如果只是为了位移，考虑使用
margin或left/top（虽然性能略低）；或者检查是否真的需要在那个层级使用动画。 - 使用
position: sticky(特定场景) ： 在某些简单的吸顶场景下，sticky可能比fixed更符合预期，且受transform的限制较小（虽然它参考的是最近的滚动父级）。
一句话总结 ：只要祖先开了
transform，fixed就变成了"局部的 fixed"，不再是"全局的 fixed"。