fixed元素必创建层叠上下文，其z-index仅在内部生效；父级transform/filter/opacity
fixed 元素本身就会创建层叠上下文
只要写了 position: fixed，无论有没有设 z-index，该元素就自动成为新的层叠上下文（stacking context）。这不是 bug，是规范行为。这意味着：它的子元素的 z-index 只在它内部生效；外部元素再高的 z-index 也盖不住它——除非它们同属一个更上层的上下文。
常见误判是以为“没写 z-index 就没事”，其实只要定位方式是 fixed，就已经切出独立 Z 轴空间了。
- 用 Chrome DevTools 的 Computed 面板搜索
stacking context，值为Yes即确认已触发 - 打开 Layers 面板（More Tools → Layers），点选该元素，看
Stacking context字段是否指向它自身 - 不要试图靠提高父容器
z-index来“压住” fixed 子元素——它已经不在同一层叠域里了
父级 transform/filter/opacity 会让 fixed 元素失效或偏移
当一个 position: fixed 元素被嵌套在某个父容器内，而该父容器设置了 transform、filter 或 opacity（哪怕只是 opacity: 0.99），它就不再相对于视口定位，而是相对于那个父容器——这直接导致位置错乱，尤其在横屏、缩放或键盘弹出时暴露明显。
- 检查目标元素的所有上级节点，重点看
transform（含translateZ(0)）、filter、opacity 、<code>will-change - 临时删掉疑似父容器的这些样式，观察 fixed 元素是否回归视口基准
- 若必须保留效果（如毛玻璃或硬件加速），把 fixed 元素提至
直接子级，绕过干扰链
层爆炸导致滚动掉帧，不是卡顿而是帧率跌破 30fps
每个意外创建的层叠上下文都会催生一个 Composite Layer。Chrome Layers 面板里如果看到十几个甚至几十个浅色小方块，基本就是“层爆炸”了。这不是渲染慢，而是合成阶段频繁切换上下文、重复上传 GPU 纹理、触发隐式重绘，最终表现为 iOS 滚动抖动或 Android 动画掉帧。
- 典型诱因：
transform: translateZ(0)批量加在卡片列表上、opacity: 0.99设在 flex 容器上、filter: blur(0)用于过渡占位 - 避免给所有父容器加
position: relative“保险”——这反而会无意识创建更多层叠上下文 - 需要跨区域控层时，统一把相关 fixed 元素（如导航栏、弹窗、自定义光标）提至
下，并用 CSS 自定义属性统一分配层级：--z-nav: 100、--z-modal: 1000、--z-cursor: 99999
iOS fixed 抖动不是 CSS 写错了，是合成层未启用
iOS Safari 对 position: fixed 的渲染依赖滚动容器是否启用了合成层。如果 body 没有明确高度约束（比如缺 height: 100% 或 min-height: 100vh），或 fixed 元素被包裹在 opacity/transform 容器中，Safari 就不会为它分配独立 GPU 图层，导致滚动时坐标更新滞后，视觉上就是“跳帧”或“粘滞”。
- 只对 fixed 元素自身加
transform: translate3d(0, 0, 0)，别加在父级上 - 避免和
transition同时使用——iOS 15+ 对 transition + fixed 的合成支持不稳定 - 键盘弹起/收起时 viewport 高度突变，
resize和focusin事件可用来手动重置位置，或降级为position: absolute+height: 100vh方案
z-index 却悄悄创建了层叠上下文的属性——opacity: 0.99、scale(1)、blur(0)，它们不声不响就把渲染树切碎了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
