fixed元素在transform父容器内失效是因层叠上下文改变了其包含块，应将其移至body下（如Portal），或用sticky替代（需滚动容器+无层叠上下文），禁用不必要的transform，必要时用requestAnimationFrame+getBoundingClientRect动态模拟。
父容器有 transform 时 position: fixed 失效怎么办
直接说结论：fixed 元素一旦被包含在具有 transform、opacity、filter 等创建层叠上下文（stacking context）的父元素内，它的定位基准就不再是视口，而是该父容器——这导致它“跟着滚动”或位置错乱。
这不是 bug，是 CSS 规范行为。关键不是“怎么强行修”，而是“怎么绕开层叠上下文对 fixed 的劫持”。
- 最稳妥的做法是把需要
fixed的内容移出那个带transform的父容器，挂到body下（比如用 React Portal、Vue Teleport，或手动document.body.appendChild） - 如果必须保留在 DOM 原位置，可尝试用
position: sticky替代——但注意它只在滚动轴方向生效，且依赖父容器高度和滚动容器明确（比如overflow-y: scroll） - 禁用父级的
transform不现实？那至少确认它是否真有必要：比如仅为了开启硬件加速，will-change: transform或backface-visibility: hidden有时更轻量且不触发新层叠上下文
用 position: sticky 模拟固定定位但避开层叠上下文限制
sticky 不受父级层叠上下文影响，因为它本质上是相对定位 + 滚动绑定，不是脱离文档流的绝对定位。但它有硬性前提：必须有一个明确的滚动容器（即设置了 overflow 且值不为 visible 的祖先），且自身不能是该容器的子代中第一个/最后一个元素（否则无“粘住”区间）。
- 常见错误：父容器用了
transform，又给子元素设position: sticky; top: 0，但没给父容器加overflow-y: auto——结果完全不 sticky - 正确做法：把
sticky元素的直系父容器设为滚动容器（max-height: 600px; overflow-y: auto），同时确保该父容器本身没有创建层叠上下文（比如去掉它的transform或opacity） - 兼容性注意：
sticky在 iOS Safari 15.4+ 才稳定支持bottom，left/right在部分安卓 WebView 仍有问题；若需bottom: 0效果，优先考虑 JS 监听scroll动态算位置
JS 动态计算位置替代 fixed 的适用场景与代价
当 DOM 结构锁死、无法移动节点，又必须视觉上“钉住”，JS 是兜底方案。但它不是“模拟 fixed”，而是用 position: absolute + 实时更新 top/left 值来逼近效果。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
scroll和resize，但别直接在事件里写重排操作；用getBoundingClientRect()获取目标区域在视口中的位置，再反推绝对定位坐标 - 性能陷阱：未节流的
scroll会导致高频重排；推荐用requestAnimationFrame包裹更新逻辑，或用IntersectionObserver监听目标区域是否进入视口来做开关 - 移动端要注意：iOS Safari 的
scroll事件默认非即时触发（bounce 后才发），可用{ passive: false }并调用event.preventDefault()强制同步，但会牺牲滚动流畅度
为什么 transform 会让 fixed 失效——层叠上下文的真实影响
很多人以为只是“transform 改变了坐标系”，其实核心是规范规定：任何创建了层叠上下文的元素，都会成为其子元素中 fixed 定位的“包含块（containing block）”。而 transform 正是创建层叠上下文的条件之一（哪怕值是 none 或 translate(0)）。
- 其他同样危险的属性：包括但不限于
opacity小于 1、filter非none、will-change: transform、perspective、clip-path - 检查方法：在 Chrome DevTools 的 Elements 面板中选中父元素，右侧 Styles 标签页里搜
transform或opacity；Computed 标签页里看contain是否为paint或layout，这些也会隐式创建层叠上下文 - 容易被忽略的一点：CSS 框架（如 Tailwind）的
group-hover:scale-105类，会在 hover 时动态加transform，导致原本正常的fixed菜单突然失效——这种时机性问题最难排查
