按钮下方图片遮挡点击功能，调整z-index致图片隐藏求助

• 给图片设置pointer-events: none
  这是最快的解决方式，让图片放弃拦截所有点击事件，点击会直接穿透到下方的按钮，图片的显示位置完全不受影响。只需要给图片加这段CSS：

  .your-image-selector {
    pointer-events: none;
  }
  

• 调整z-index但避免图片被隐藏
  之前调z-index导致图片消失，大概率是按钮的z-index设得太高，或者图片的父容器有overflow: hidden属性。试试给按钮设一个比图片稍高的z-index，同时确保两者都开启定位（z-index需要配合定位生效）：

  .your-button-selector {
    position: relative;
    z-index: 1;
  }
  
  .your-image-selector {
    position: relative;
    z-index: 0;
  }
  

  要是图片在按钮的父元素外面，注意别让父元素设置了z-index形成堆叠上下文，不然按钮的z-index只在父元素内部生效。

• 调整DOM层级
  如果结构允许，把按钮移到和图片同一层级（或者更高层级的容器里），再配合z-index就能保证按钮在点击层级上优先，同时两者都正常显示。

内容的提问来源于stack exchange，提问作者ibn dahou idrissi othmane