话不多说先上代码

          <div class="right-box">
               <div class="facilityName">
                 <span>{{item.name}}</span>
               </div>
               <div class="btn">
                 <el-button @click="undock">移除</el-button>
               </div>
               <div class="spanName">
                 <span>丰收路支行>远程监控中心>对讲主机2-办公区域</span>
               </div>
          </div>

1.上眼一看，是不是没什么问题，按钮是不是挺正常的，点击事件什么的也都有对吧，现在来看页面效果

2. 这个是正常的效果，鼠标划上，有个小手，还能点击对吧，下面来看看那个不正常的

3.同样的代码，为什么显示效果不同呢，第一个是正常的，但是第二个这种效果的连小手都没了，点击事件也跟着都不生效了，为什么会这样呢，在网上找了各种答案都不行，最后发现是CSS样式出的问题，

4.重点来了，先看代码

.box {
  width: 1000px;
  height: 550px;
  z-index: -1;
  }

这个box是最外面的大盒子，我给它加了一共 z-index: -1;这个属性，刚开始我用这个属性，就是为了让点击别的按钮出个弹框把这个覆盖，就加了它，后来就出现了，点击事件卜生效的事情，后来官网了解了一下这个属性，真的不能乱用，我给大盒子加了-1，弹框加了1000，，弹框的优先级比大盒子都高了，这样一来，主页面的按钮都不会生效了，改完以后的代码这样所有的都正常了，

box {
  width: 1000px;
  height: 550px;
  z-index: 1000;
  }

这个小坑，各位大佬们要注意啦