el-dialog 组件蒙层把弹框给遮住问题处理

一、问题

      如下图所示，本应该出现在遮罩层上面的弹框，出现在了遮罩层下面。

      审查元素时看到，遮罩层的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，显示效果相同。