直接给装饰层加 pointer-events: none，使事件穿透至底层按钮；若装饰层含关闭按钮，需在其上显式设 pointer-events: auto，因该属性可继承且不依赖 z-index 或 opacity。
装饰层遮住了按钮，点击失效怎么办
直接给装饰层加 pointer-events: none。它不是“让下层变可点”，而是让本层彻底不参与鼠标事件分发——事件会原路穿透到底层真实可交互元素（比如 <button></button> 或 <a></a>）。这比调 z-index、改 opacity 或用 visibility: hidden 更精准，因为后三者都不影响事件拦截。
绝对定位的装饰图层为什么还吃点击
常见错误是只设了 position: absolute 和 z-index，但没关事件响应。只要该元素在视觉层级上盖住了底层，哪怕透明度为 0、背景为空，只要没显式声明 pointer-events: none，它就默认是 auto，照样吞点击。
- 检查是否遗漏了
pointer-events: none，别只盯着z-index调大小 - 若用了
::before或::after伪元素做装饰，也要单独加该样式 - 父容器设置了
transform、opacity或filter，可能意外创建了层叠上下文，导致z-index失效——但这不影响pointer-events生效，它只看自身样式
装饰层里有关闭按钮，怎么只让它可点
pointer-events 是可继承属性。一旦父装饰层设了 none，它的所有子元素（包括关闭按钮）默认也失效。必须显式重置：
.deco-layer {
pointer-events: none;
}
.deco-layer .close-btn {
pointer-events: auto;
}
注意：这里不能靠 !important 或更高 z-index 挽救，只有 pointer-events: auto 才能恢复响应能力。如果子元素是伪元素（如 .deco-layer::after），它无法再设 pointer-events，得换用真实 DOM 元素承载交互控件。
IE11 及以下不支持 pointer-events 怎么办
现代项目基本不用兼容 IE11，但如果真要支持，pointer-events: none 会被浏览器完全忽略，装饰层照常拦截点击。此时没有纯 CSS 解法，只能切 JS：
- 监听装饰层父容器的
click事件，用event.target和event.clientX / event.clientY计算点击位置，手动触发底层元素的click() - 或者把装饰层从 DOM 中移出，用 Canvas 或 SVG 动态绘制，避开 HTML 事件流
- 更实际的做法是：放弃 IE11，或改用
background-image替代<img>做装饰——背景图天然不参与事件流
真正容易被忽略的是嵌套多层装饰时的继承链：一个 pointer-events: none 父层 + 若干子层，其中某一层漏写了 auto，就会导致局部交互失灵，且很难通过肉眼排查。建议用浏览器的「Rendering」面板开启 “Paint flashing” 或直接用 “Toggle element screenshot” 查看事件接收路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
