pointer-events: none；的妙用处

上传文件时input标签的默认样式有些不美观，我们一般通过一张图片位置一致盖在上面，有时候点击图片的时候input不起作用，提供以下两种解决方法

HTML

<div class="wrap">
   <input type="file">
   <img class="content" src="" alt="">
</div>

公共的css样式

  .wrap {
      position: relative;
      width: 200px;
      height: 200px;
  }

• (input绝对定位)=>定位元素是不占标准流的，如果img也给了定位元素，给input加上z-index: 99

  input {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     opacity: 0;     
  }
  img{
     width: 200px;
     height: 200px;
  }

• （img绝对定位）=>pointer-events: none 可让元素可穿透

input {
      width: 200px;
      height: 200px;
      opacity: 0;
}
img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}