页面无法获取点击事件的问题

问题：点击事件无法获取到

<div class="search-header" @click="testClick">
    <div @click="goto('/search/1?distrctid='+ params.distrctid +'&floor='+ params.floor +'&building='+params.building+'&type=2')">
                <div class="search-input">
                  <input type="text"  placeholder="输入订单号、手机号、患者或护理员" @click="showinput"> <span>搜索</span>
                </div>
          </div>
          <span slot="right" @click="showScreen" class="fillter">筛选</span>
      </div>

解决方法：查看css样式 是否使用的定位和z-index。因为这些样式会影响到流式布局导致页面被遮罩。无法进行点击。

先来看一下问题出现的原因吧！！！

 .ordertoass_page{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #f0f0f0;
      z-index: 202;
  }
  .newwprder .ordertoass{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      .navBar{
        position: fixed;
        left: 0;
        // top: 106px;
        top: 0px;
        width: 100%;
        z-index: 100;
      }
      .search-header{
        // position: fixed;
        // left: 0;
        // top: 106px;
        // top: 46px;
        display: flex;
        justify-content: space-between;
        padding: .2rem .6rem;
        margin-top: 50px;
       // position: relative;  //加了这两行代码就可以啦
       // z-index: 100;
}

页面中尽量不使用定位，因为影响布局。如果是定位的情况下可能会形成遮罩层导致事件无法点击，因此在开发中大家尽量还是少用定位哦