object标签为窗口元素，天然浮于所有div/button之上，z-index无效；唯一稳定解法是用iframe垫片：object后紧跟position: absolute的iframe，按钮再置于其上并共用relative父容器。
object标签上盖不住按钮？别调z-index，先换iframe垫片
HTML里用嵌Flash或旧式媒体插件时，想在上面加跳过按钮、倒计时或遮罩，99%会失败——不是CSS写错了，是浏览器渲染机制决定的：在IE和老版Chrome/Edge中属于「窗口元素（windowed element）」，天然浮在所有div、button甚至普通iframe之上。
强行给按钮设z-index: 9999没用；给加position: relative也没用——它根本不响应定位属性。
唯一稳定跨浏览器的解法是插入一层作为“垫片”：
-
保持原样，不加任何z-index或position - 紧跟其后放一个
，样式必须含：position: absolute、显式width/height（不能用百分比）、z-index比高但比按钮低 - 按钮/遮罩层用
position: absolute或relative，z-index严格大于iframe的值 - 三者必须共用同一个
position: relative父容器，否则层叠上下文断裂，z-index彻底失效
全屏遮罩点击区域失效？别信100vh，改用inset: 0或fixed四边定位
开屏广告遮罩点了没反应，或者只边缘能点，大概率是尺寸声明出了问题。用height: 100vh在iOS Safari滚动时会因地址栏收放导致视口高度突变，遮罩瞬间“缩水”；用width: 100%; height: 100%又依赖html和body高度继承，极易断链。
安全写法只有两种：
- 全屏遮罩：用
position: fixed; top: 0; left: 0; right: 0; bottom: 0（兼容性最好） - 现代浏览器可选
inset: 0（更简洁，但Safari 15.4+才稳定支持） - 局部遮罩（如只盖某个卡片）：父容器设
position: relative，遮罩用position: absolute; top: 0; left: 0; right: 0; bottom: 0 - 务必检查父级是否带
overflow: hidden或transform——它们会裁剪fixed元素的渲染范围
遮罩点了却关不掉弹窗？event.target === event.currentTarget才是真本体
用户点遮罩层，结果弹窗内容区里的空白padding也触发了关闭——这不是bug，是DOM事件冒泡的自然行为。监听遮罩的click，但实际点击的是子元素（哪怕只是透明区域），事件照样向上冒泡到遮罩节点。
正确判断方式只有一条：
- 写
overlay.addEventListener('click', e => { if(e.target === e.currentTarget) closeModal(); }) - 别用
e.target.classList.contains('overlay')：一旦遮罩里加了加载图标等子元素，判断就失效 - 也别用
overlay.contains(e.target)：当遮罩和弹窗不在同一DOM层级时，结果不可靠 - 移动端建议用
pointerdown替代click，避开iOS 300ms延迟带来的误判
遮罩层“半透却点不穿”？pointer-events和层叠上下文要分开看
设了background-color: rgba(0,0,0,0.5)的遮罩，默认仍拦截所有鼠标事件。想让鼠标穿透遮罩点到底层按钮？关键不是调透明度，而是控制pointer-events。
但要注意副作用：
-
pointer-events: none会让整个遮罩及其所有子元素都失焦——按钮、文字、图标全不可点 - 若需保留遮罩内按钮可点，必须把按钮单独提一层DOM，再对它设
pointer-events: auto -
z-index再高也无效，如果遮罩父级用了transform、opacity: 0.99或filter——这些会创建新层叠上下文，让z-index只在内部比较 - 排查方法：打开开发者工具 → Computed → 找遮罩和目标元素的最近共同祖先，看是否带上述属性
真正难的不是写几行CSS，而是分清哪些是渲染层限制（如的窗口属性），哪些是事件流逻辑（如冒泡判断），哪些是层叠上下文陷阱（如transform隐式隔离）。改错地方，一行代码就能生效；改错方向，调一万次z-index也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
