element-ui弹出组件的遮罩层在弹出层el-dialog的上面

今天又遇到了这个问题，之前遇到过一次，但是没有记录，今天刚好又遇到了，就记录下，增加下记忆

问题：加完el-dialog后，测试发现，遮罩层在弹出层上面。

解决办法：
1、给el-dialog的父元素添加z-index属性，一定要比遮罩层的大

z-index：2000//此为样例

2、如果第一个办法还是不能解决，我们就用第二个办法。

出现这个状态的原因：

可以检查下我们的代码布局样式，在dialog的组件外层div我们设置了 position：absolute 属性，这个属性导致遮罩层会在最上面。

解决办法：
在dialog的组件内加上这段代码 :append-to-body=“true” ；或者:modal-append-to-body=“false” 即可解决这个办法。
如：

 <el-dialog
   title="用户登录详情"
    :visible.sync="dialogVisible"
    width="40%"
    :data="onlineRow"
    :before-close="handleClose"
    :append-to-body="true">
    <span class="detailList">登录时间：</span>
    <span class="detailList">IP地址：</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
     </span>
  </el-dialog>

效果：

本文地址：https://blog.csdn.net/FannyIf123/article/details/107528702