问题
我们常规制作的弹窗，一般是通过一个div+css绝对定位来实现的。 但有个问题，div透明区域也是会占用位置。导致视觉看起来，底部普通页面位置可以看到内容，但实际被这个div透明区域遮盖了，点击或者划词无反应。 有什么方式可以实现，div透明区域不遮挡页面，有文字或者图片区域才遮挡呢？
分析
这是一个典型的点击穿透问题。 这个其实相当于在弹窗div中，有内容的区域期望能有交互，透明区域能穿透到普通页面上。
解决方案：
- 使用
pointer-events属性。可以设置元素在某些区域不响应鼠标事件。 - step1：给整个div设置
pointer-events: none，这样鼠标事件会穿透该元素。 - step2：对于需要交互的内容（如按钮、文本等），再设置
pointer-events: auto，让它们可以响应事件。
后记
pointer-events 属性，之前一直只知道能阻止响应鼠标事件，没想到还能用在点击穿透问题。
以上的解决方案是来自于deepseek提供。
