element-ui的按钮组件，点击没反应，连小手都没了

话不多说先上代码

<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; }

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