fixed定位元素被遮挡通常因父级或兄弟元素触发新层叠上下文，如transform不为none、opacity
fixed定位元素被遮挡，通常是因为父容器或兄弟元素设置了 transform、opacity、filter 或 will-change 等属性，触发了新的层叠上下文（stacking context），导致 z-index 失效或作用范围受限。
检查是否意外创建了层叠上下文
以下 CSS 属性会让元素成为新的层叠上下文根节点，其内部的 fixed 元素将只在这个上下文中排序，不再和页面其他元素直接比 z-index：
- transform 值不为 none（如 transform: translateZ(0)、translateY(10px)）
- opacity 小于 1（如 opacity: 0.99）
- filter 不为 none（如 filter: blur(1px)）
- will-change 设为任意可触发层叠的值（如 will-change: transform）
- isolation 设为 isolate
解决方法：移除或调整这些属性。若必须使用（比如动画需要 transform），可把 fixed 元素移到 body 直接子级，脱离该上下文。
确保 z-index 有生效前提
z-index 只对 定位元素（position: relative/absolute/fixed/sticky）有效。如果 fixed 元素本身没设 position: fixed，或被祖先的层叠上下文“截断”，z-index 就不会按预期工作。
立即学习“前端免费学习笔记（深入）”；
- 确认该元素的 position: fixed 已正确声明
- 给它设置一个足够大的 z-index（如 9999），且不能是 auto
- 避免父元素设置 z-index（尤其非 static 定位时），否则可能限制子元素层级范围
推荐的结构优化方案
当 UI 组件（如弹窗、顶部导航栏）用 fixed 定位但常被遮挡时，建议从 DOM 结构入手：
- 把 fixed 元素（如 .header-fixed、.modal）直接挂到 下，避开复杂布局嵌套
- 用 JS 动态追加（如 document.body.appendChild(el)），确保它在渲染层级最外层
- 配合统一的 z-index 命名规范（如 --z-topbar: 1000; --z-modal: 2000; --z-toast: 3000），用 CSS 变量集中管理
调试小技巧
快速定位问题：
- 在浏览器开发者工具中选中被遮挡的 fixed 元素，看“Computed”面板里 z-index 是否计算为 auto 或具体数值
- 逐个禁用父级元素的 transform / opacity / filter，观察遮挡是否消失
- 临时给 fixed 元素加 outline: 2px solid red 和 background: rgba(255,0,0,0.1)，确认是否真被盖住，还是透明/尺寸问题
不复杂但容易忽略。
