话不多说先上代码
<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;
}