z-index失效本质是层叠上下文割裂，模态框与固定头部不在同一上下文内比较；需检查并确保二者同属一个上下文或各自独立且z-index合理。
z-index 值必须形成严格递增链，不能只靠“够大”
模态框盖不住固定头部，本质是层叠上下文（stacking context）割裂导致的 z-index 失效。不是你给模态框设了 z-index: 9999 就一定在最上——如果它的父容器触发了新的层叠上下文（比如有 opacity: 0.99、transform: translateZ(0)、will-change: transform 或 filter），那它的 z-index 就只在该上下文内生效，和固定头部根本不在同一比较维度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的“Layers”面板或“Computed”标签页，逐级检查固定头部（如
.header-fixed）和模态框（如.modal）各自的z-index值及其最近的层叠上下文根节点 - 确保固定头部的父容器不意外创建层叠上下文；若必须加
transform或opacity，就把它也提升为独立上下文，并显式设高z-index - 模态框的
z-index必须高于其所有祖先中**最早创建层叠上下文的那个容器**，而非仅高于直接父元素
固定头部需主动脱离文档流且自成层叠上下文
很多固定头部只写了 position: fixed，但没配 z-index，或设了却低于模态框所在上下文的起始值。更隐蔽的问题是：它可能被某个包裹它的 div 拉进了低优先级的层叠上下文中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 固定头部元素自身必须声明
z-index（如z-index: 1000），且该值要大于页面常规内容（如z-index: 1），但小于模态框基线（如z-index: 1050） - 它的直接父容器应避免任何触发层叠上下文的属性；如有必要，让固定头部自己成为上下文根：
position: fixed; z-index: 1000; isolation: isolate; - 不要依赖
body或html的默认层叠顺序——它们不是可靠的层叠上下文锚点
模态框需强制接管顶层，且避免嵌套污染
多个模态框嵌套时（比如弹窗里再开弹窗），如果子模态框只是简单继承父模态框的 z-index，很容易被父上下文“锁死”，实际堆叠层级反而低于固定头部。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个模态框实例应动态计算并设置唯一
z-index，例如用全局计数器：modal.style.zIndex = String(++globalZIndex); - 模态框的
root节点（即挂载到document.body的那个div）必须有position: fixed和明确z-index，不能依赖内部组件的定位 - 禁止在模态框内部再用
transform或opacity包裹整个内容区——这会创建新上下文，把子元素的z-index关进小黑屋
移动端 Safari 的 position: fixed + z-index 隐性失效
在 iOS Safari 中，position: fixed 元素若位于一个有 -webkit-overflow-scrolling: touch 的可滚动容器内，或父级有 transform，其 z-index 行为会异常，常表现为固定头部被模态框穿透。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 固定头部必须直接挂载在
body下，绕过任何可能带transform或滚动优化的中间容器 - 禁用可能干扰的 CSS 属性：
-webkit-overflow-scrolling: auto，或改用overscroll-behavior: contain - 对 iOS 设备做兜底：用 JS 监听
scroll，手动同步固定头部的top值（慎用，仅当 CSS 方案彻底失效时）
真正难的不是算数字，而是识别哪一层悄悄截断了层叠流。每次加一个 transform 或 opacity，都得重新验证整条路径上的上下文是否连通。
