若依开发时指定el-dialog局部显示的方法

第一步 实例化一个 el-dialog，最外面的div就是ei-dialog要显示的位置

<div id="dialog-box">
<el-dialog :visible.sync="changeVis" title="片区修改" width="80%" :modal-append-to-body="false">
  <el-form
     ref="form"
     :model="form"
     :rules="rules"
     size="medium"
     label-width="100px"
    >
   <el-form-item label="片区名" prop="areaNo">
      <el-input
         v-model="form.areaNo"
         placeholder="请输入修改的片区名"
         clearable
         :style="{ width: '100%' }"
       ></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer">
     <el-button @click="cancelEdit">取消</el-button>
     <el-button type="primary" @click="submitEditForm">确定</el-button>
  </div>
</el-dialog>
<div>

第二步 在<style>标签里面写上：

  .el-dialog__wrapper{
    position: absolute !important;
  }
  .v-modal{
    position: absolute !important;
  }

结果如下：

要让遮罩不影响用户与其他控件进行交互，除了需要使用 :modal-append-to-body 和 绝对位置以外，还可能会用到 margin，比如当需要隐藏遮罩的控件在屏幕右边时，就需要用 margin-left将遮罩向右移，使得左边不会被隐藏的遮罩层干扰其它交互。当然，还有设置好width，否则，右边的控件可能会发生形变。