一、问题
如下图所示,本应该出现在遮罩层上面的弹框,出现在了遮罩层下面。
审查元素时看到,遮罩层的z-index为2042。
将遮罩层隐藏,查看弹框的z-index为2043。
二、原因
z-index的设置没有问题,但z-index值大的图层反而显示在了下面。从上面两个截图可以看出,遮罩层是插入到body元素上的,而弹框却是在层级比较深的组件中,所以考虑到是受父元素影响了。审查元素得知,在弹框的父元素中,有对z-index的设置,且值小于2042。
三、解决方案
打开官方文档,关于el-dialog的属性,有以下两个说明。
从图中可以看出,element-ui对弹框的处理,默认把遮罩层插入至了body元素上,而dialog自身没有插入至body元素。如果将遮罩层和弹框插入到同一个地方,就可以避免上面的问题了。
设置modal-append-to-body为false,将遮罩层插入至dialog的父元素上,弹框显示正常。
同理,将append-to-body设置为true,显示效果相同。