不修改z-index值，能否与下层HTML元素进行交互？

没问题！完全可以在不修改z-index值的前提下，让下层的element B响应交互，核心就是利用CSS的pointer-events属性来实现事件穿透。

具体操作步骤： #

• 给上层的透明Canvas（element A）添加以下CSS样式：

.element-a {
  pointer-events: none;
}

原理详解： #

pointer-events: none这个属性会让元素完全忽略所有鼠标和触摸类的交互事件——点击、hover、拖拽这些操作都会直接“穿过”element A，落到下层的element B上。而且这个设置不会影响element A的视觉层级，你依然能透过透明Canvas看到下方的element B，完美满足你的需求。

进阶小技巧： #

如果之后你需要让element A上的某些子元素保留交互能力（比如Canvas上绘制的特定图形需要响应点击），可以给这些子元素单独设置pointer-events: auto，这样父元素的穿透规则就不会覆盖子元素的交互权限了。

内容的提问来源于stack exchange，提问作者Jithin Ks