fixed元素被盖住的本质是祖先元素意外创建层叠上下文，截断z-index全局比较；需排查opacity、transform、filter等触发属性并移除或替换。
fixed 元素被其他内容盖住，本质是层叠上下文（stacking context）冲突
不是 z-index 没生效，而是父级容器无意中创建了新的层叠上下文，把 position: fixed 元素“框死”在局部层级里。常见于设置了 opacity、transform、filter、will-change 或 isolation: isolate 的祖先元素——哪怕它离 fixed 元素隔了三层 DOM，也会截断 z-index 的全局比较逻辑。
检查并打断意外的层叠上下文
用浏览器开发者工具的「Layers」面板或「Computed」标签页，逐级查看 fixed 元素的祖先是否触发了层叠上下文（Computed 中会显示 stacking context: yes）。重点排查：
- 父容器或更上层是否有
transform: translateZ(0)、transform: scale(1)等无意义但会触发上下文的样式 - 是否存在
opacity: 0.99这类非 1 的透明度设置 -
filter: blur(0)、filter: none在某些浏览器中仍会创建上下文 - 是否在 fixed 元素外层套了
isolation: isolate
修复方式：删掉这些属性，或改用不影响层叠上下文的替代方案（例如用 visibility: hidden 替代 opacity: 0 做隐藏）。
z-index 必须配合定位属性才有效
z-index 对 position: static 元素完全无效。fixed 元素本身没问题，但它的兄弟/父级若没设 position，就无法参与同一层级的 z-index 排序。
立即学习“前端免费学习笔记（深入）”；
- 确保遮挡 fixed 元素的其他元素也设置了
position: relative/absolute/fixed - 避免给 fixed 元素的直接父容器设
z-index—— 它可能反向约束子元素的层级范围 - 数值不必过大，
z-index: 100和z-index: 9999在同一上下文中效果一致；真正起作用的是相对大小关系
移动端 Safari 的 fixed + transform 组合有特殊 bug
iOS 15+ 中，如果 fixed 元素同时设置了 transform（如 translateY），且页面存在滚动，z-index 行为可能异常：它会被视口顶部的原生 UI（地址栏、状态栏）或某些第三方键盘遮挡，且无法通过提升 z-index 修复。
临时绕过方式：
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
/* 避免 transform */
/* transform: translateY(0); ← 删除这一行 */
/* 改用 top/bottom/left/right 控制偏移 */
}若必须用 transform 动画，建议动画结束后立即移除 transform，恢复为纯定位控制。
固定定位元素的遮挡问题，核心不在“加多大 z-index”，而在于理清谁真正参与了层叠排序、谁悄悄切断了排序链条。浏览器对层叠上下文的判定比多数人想象得更敏感，一个看似无害的 opacity: 0.999 就足以让整个 fixed 区域失效。
