transform会让fixed元素“认错爹”不是bug而是css规范强制行为：只要任意祖先元素设置非none的transform（如translatez(0)、scale(1)），fixed的包含块就从视口降级为该祖先；同效属性还有filter、backdrop-filter、opacity
transform 会让 fixed 元素“认错爹”
不是 bug，是规范强制行为：只要任意祖先元素（不一定是直接父级）设置了非 none 的 transform，position: fixed 的包含块（containing block）就会从视口降级为那个祖先元素。它不再锚定屏幕，而是锚定那个带 transform 的盒子——看起来就像“跟着滚动”或“卡在容器里”。
触发条件很隐蔽，常见但容易被忽略的值包括：
• transform: translateZ(0)（常用于开启硬件加速）
• transform: scale(1)、transform: rotate(0)、transform: translateX(0)
• 即使视觉无变化，只要计算值不是 none，就创建新层叠上下文，fixed 就失效
哪些属性有同等效果？别只盯着 transform
transform 不是唯一元凶。以下任一属性在祖先链上生效，都会让 fixed 退化：
-
filter（哪怕只是filter: blur(0)或filter: opacity(1)） backdrop-filter-
opacity小于 1（如opacity: 0.99） -
will-change: transform（单独写也可能触发，尤其在 Chrome 中） - iOS Safari 的
-webkit-overflow-scrolling: touch（等效于隐式创建包含块）
这些都属于“能创建层叠上下文 + 改变包含块定义”的 CSS 属性，浏览器一视同仁。
怎么快速定位是哪个祖先在“搞鬼”？
别靠猜，用 Chrome DevTools 实操排查：
- 选中失效的
fixed元素，在 Elements 面板按住 Shift 并连续点击右上角箭头，逐层向上跳转父节点 - 每到一层，切到 Computed 标签页，搜索
transform、filter、opacity、will-change - 重点盯
transform: translateZ(0)和第三方组件自动加的样式（比如 Ant Design 的Drawer、Element Plus 的el-dialogwrapper） - 真机测试必须做：缩放、键盘弹出、横竖屏切换时，
fixed容易二次暴露
修复方案不是改样式，而是动 DOM 结构
临时加 transform: none !important 只能验证问题，不能上线——它可能破坏动画、滚动性能或组件内部逻辑。
真正有效的解法几乎都涉及 DOM 层级调整：
- React 中用
createPortal渲染到document.body下 - Vue 2/3 在
mounted钩子中调用document.body.appendChild(el)，或用<teleport to="body"></teleport> - 纯 HTML 就手动把
<div class="global-fixed-btn"> 移到 <code>底部，并确保样式类名不依赖原层级（比如别用.modal .fixed-btn） - 显式设高
z-index（如z-index: 2147483647），避免被其他body子元素遮挡
最麻烦但最稳的点在于：你得同时改结构、改样式选择器、改 JS 挂载逻辑——三者缺一不可。很多人只改了其中一项，结果在某个机型或某个交互路径下又复现。
