position：fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法

最近vue项目中为了使header与sidebar部分固定不动，只有main主体部分内容滚动，于是给main部分加上了如下css

.app-main {
    height: 100%;
    position: fixed;
    overflow: scroll;
}

导致main主体部分子元素dialog弹出框被遮罩覆盖的问题，如下图

解决办法：父元素设置成固定定位时，子元素弹出框设置:modal-append-to-body='false’即可

<el-dialog
title="新增客户信息"
:visible.sync="addDialogVisible"
width="50%"
@close="addformClosed"
:modal-append-to-body='false'
>
    <!-- 表单 -->
    <el-form ref="addformRef" :model="addform" :rules="addFormRules">
        .....
    </el-form>
</el-dialog>

解决后

若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级），知道这个原理就好办了

找了很多篇解决方案，只有这一篇解决了我的问题，这一篇写的很好
添加链接描述