遮罩层必须与弹层处于同一层叠上下文，否则z-index无效；常见问题包括弹层父容器触发新上下文、遮罩祖先含opacity

遮罩层 z-index 必须高于弹层本身

遮罩解决不了弹层覆盖问题，除非它在层叠上下文中的顺序真正压住弹层。常见错误是只给遮罩设 z-index: 100，但弹层父容器有 transform、opacity 或 <code>will-change，意外创建了新的层叠上下文，导致弹层及其子元素（包括遮罩）被框死在该上下文中——此时遮罩再高的 z-index 也盖不住同级弹层内容。

实操建议：

• 检查弹层最外层容器是否触发了层叠上下文（用浏览器开发者工具的“Computed”面板看 contain、transform、filter 等属性）
• 遮罩和弹层必须处于同一层叠上下文内；若弹层父容器已创建新上下文，就把遮罩移出该容器，挂到 下
• 遮罩的 z-index 值需比弹层根节点高，而非比弹层内部某个 <div> 高 <h3>遮罩本身不能有 opacity </h3> <p><code>opacity: 0.9 这类设置会强制创建层叠上下文，且让其所有子元素（包括遮罩和它包裹的弹层）被降级处理。结果就是：遮罩看似半透明，实则和弹层一起被“锁”在低层级，页面其他绝对定位元素反而能穿透盖上来。

  实操建议：

  • 遮罩自身可设 opacity，但它的任意祖先（直到 ）都不能有 opacity
  • 替代方案：用 background: rgba(0, 0, 0, 0.5) 实现半透明效果，它不触发层叠上下文
  • 避免对遮罩容器用 filter: blur() 或 transform: scale(1)——哪怕看似无意义，也会创建新上下文

  移动端 iOS Safari 的 position: fixed 遮罩失效

  iOS Safari 对 position: fixed 在滚动时的渲染有特殊限制：当页面存在 overflow: scroll 的容器（如弹层内部滚动区），或触发了 viewport 缩放，fixed 遮罩可能脱离视口、错位甚至消失。

  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载

  实操建议：

  • 遮罩改用 position: absolute + 动态监听 window.innerHeight 和 scrollY 更新 top 和 height
  • 禁用 body 滚动：document.body.style.overflow = 'hidden'，防止遮罩被滚动带偏
  • 避免在遮罩上直接绑定 touchmove 阻止默认行为——iOS 可能误判为手势冲突，导致遮罩响应迟滞

  Vue/React 中遮罩组件的 v-if 与 v-show 切换陷阱

  v-if 会销毁遮罩 DOM 节点，下次打开时重新挂载，若此时弹层已通过 ref 或 useState 提前渲染，遮罩可能晚于弹层进入文档流，造成闪现覆盖失败；而 v-show 仅切 display，但若弹层用 transition 动画入场，遮罩未同步动画控制，会出现“先露内容、后上遮罩”的视觉撕裂。

  实操建议：

  • 遮罩与弹层共用同一控制状态（如 isModalOpen），且都用 v-if 或都用 v-show，保持 DOM 生命周期一致
  • 若需动画，遮罩使用 transition 的 appear + mode="out-in"，确保遮罩先入场、弹层再入场
  • React 中避免把遮罩写在弹层组件内部——容易因组件重渲染导致遮罩被重复挂载或脱离上下文

  遮罩不是万能胶，它和弹层的层叠关系本质上是一场 DOM 位置、CSS 渲染规则与框架生命周期的三方博弈。最容易被忽略的是：你以为在调 z-index，实际在调试层叠上下文的嵌套深度。