遮罩层点击区域比视觉范围小，主因是position未正确设置或100vh在iOS Safari中失效，应改用position: fixed+四边定位或inset: 0；同时需确保动态创建元素显式声明position，避免z-index无效。

遮罩层点击区域比视觉范围小？检查 position 和尺寸声明

遮罩层只响应部分区域点击，常见原因是用了 position: absolute 却没设父容器为 position: relative，导致它相对于最近的定位祖先偏移，甚至被裁剪。更典型的是用 100vh 做高度——iOS Safari 滚动时地址栏收放会让视口高度突变，遮罩瞬间“缩水”。

必须用 position: fixed + 四边定位：

div#overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
}

• 别写 width: 100%; height: 100vh，inset: 0 更稳（现代浏览器支持）
• 如果遮罩只盖局部（比如某个卡片），父容器才设 position: relative，遮罩改用 absolute
• 检查父级是否带 overflow: hidden 或 transform，它们会截断 fixed 元素的渲染范围

点了遮罩却没触发关闭？event.target === event.currentTarget 是关键

直接监听遮罩层的 click，但用户点的是弹窗内部的空白 padding 区，事件冒泡上来就误关了——这不是 bug，是 DOM 机制本身。

安全写法只响应遮罩本体点击：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

overlay.addEventListener('click', e => {
  if (e.target === e.currentTarget) {
    closeModal();
  }
});

• 千万别用 e.target.classList.contains('overlay')：如果遮罩里嵌了子元素（如加载图标），这个判断会失效
• 也别依赖 overlay.contains(e.target)：当遮罩和弹窗不是同级元素时，结果不可靠
• 移动端建议用 pointerdown 替代 click，避开 iOS 的 300ms 延迟导致的误判

遮罩层“透明但点不透”？查 pointer-events 和层叠上下文

半透明遮罩层（比如 opacity: 0.2 的 .bg-backdrop）默认仍拦截点击，因为 pointer-events 是 auto（即“接收鼠标事件”）。

• 想让鼠标穿透遮罩、点到下方按钮？设 pointer-events: none，但注意：它的所有子元素也会失效
• 只想穿透背景、保留遮罩内按钮可点？把按钮单独提一层，用 pointer-events: auto 覆盖
• z-index 生效的前提是元素有 position（非 static），否则再高的值也无效
• transform 或 will-change 可能意外创建新层叠上下文，让 z-index 只在子树内比较——这时遮罩和弹窗可能根本不在同一层级里

动态插入遮罩后点击无效？别漏掉 position 初始化

JS 创建的遮罩元素，默认 position 是 static，此时设置 z-index 完全没作用，它永远在底层。

必须显式设定位方式：

const overlay = document.createElement('div');
overlay.style.position = 'fixed'; // 关键
overlay.style.zIndex = '10';
overlay.style.top = '0';
// ...其他尺寸

• 避免用 setAttribute('style', '...') 拼字符串，容易覆盖已有样式；优先用 element.style.xxx
• 如果用 CSS 类控制，确保类里同时包含 position 和 z-index，例如：.backdrop { position: fixed; z-index: 10; }
• 多个遮罩叠加时，数值别乱堆 9999，按功能分层：背景层 10，内容容器 20，交互控件 30+

遮罩层的可点击区域不是“画多大就有多大”，而是由定位方式、层叠上下文、事件捕获策略共同决定的；最容易被忽略的是：明明样式写对了，却忘了动态创建的元素默认没有 position。