问题描述

问题分析

1）若dialog弹出框，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级）

Element UI中设置了modal-append-to-body='true'（默认）属性

2）dialog的显示层和遮罩层都设置了position:fixed，当然显示层的z-index肯定要比遮罩层的大，才能正常的显示弹出框。

问题就出在此处，若dialog的父级也设置了position:fixed，并且其z-index比弹出框的遮罩层的小（遮罩层处于更高一层），那么弹出框的内容就会被遮罩层所遮挡住了

3）dialog的父级元素确实设置了position:fixed，并且其z-index比弹出框的遮罩层的小，所以就会出现遮罩层把内容挡住的问题

解决方案

1）针对Element UI

Element UI该组件已经在属性层面提供了解决办法

给el-dialog设置modal-append-to-body="false"，使遮罩层插入至 Dialog 的父元素上

2）给position:fixed的父元素设置一个z-index，并且要比遮盖层的大

3）dialog父元素不使用fixed定位

4) 添加全局CSS属性

.modal-backdrop {
  z-index: -1;
}

参考文章

https://blog.csdn.net/weixin_42614080/article/details/98957018

https://blog.csdn.net/java_augur/article/details/80345181

https://blog.csdn.net/lx_1024/article/details/80365689

https://blog.csdn.net/oschina_41012066/article/details/78982969

https://segmentfault.com/q/1010000010858722