elementui关于弹出的卡片，模态框Z-index与自己编写的定位层问题

u011010407

于 2019-08-29 16:08:27 发布

阅读量8.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： elementUI+vue 文章标签： elementui zIndex

本文链接：https://blog.youkuaiyun.com/u011010407/article/details/100140254

8 篇文章

订阅专栏

本文介绍了一种在前端开发中常见的z-index层级覆盖问题的解决方案。通过调整元素的z-index属性，解决了遮罩层下popover和el-dropdown显示异常的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在表格上做了一个右键，你可以认为是一个查看详情，然后呢做了一个遮罩层，遮罩层自己没写，使用的是element的v-loading服务

 this.diffModal = this.$loading({
    lock: true, 
    spinner: ' ',
    background: 'rgba(0, 0, 0, 0.1)'
 });

然后查询详情的面板就是用了 position: fixed;

然后问题来了，在详情面板中的popover、el-dropdown看不到了，最后发现是z-index的问题，如何解决呢，其实就是修改详情面板的z-index即可

 
this.$nextTick(() => {
    this.$el.querySelectorAll('.diff-box')[0].style.zIndex = parseInt(zIndex) + 1;
})