el-dialog被挡住了，不在最高层，z-index：999无效

el-dialog通过设置:visible.sync="dialogVisible"后，显示出来，但是没有置于最顶层，而是被遮罩层挡住了。

即使加入style:"z-index:999"后任然无法置于顶层

出现这个状态的原因：

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

解决办法：

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

<el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :append-to-body='true'
      width="30%">
      <span>
        <el-form
          :rules="changeRules"
          ref="changeForm"
          :model="changeForm"
        >
          <el-form-item prop="phone">
            <el-row :gutter="10">
               <el-col :span="24">
                 <el-input v-model="changeForm.phone" placeholder="请输入要修改的手机号"></el-input>
               </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="regCode">
            <el-row>
            <el-col :span="18">
                 <el-input v-model="changeForm.regCode" placeholder="请输入验证码"></el-input>
               </el-col>
              <el-col :span="6">
                 <el-button type="text" @click="changePhone" :disabled="codeDisable">{{ msg }}</el-button>
               </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="10" v-if="changeState">
             <el-col :span="6">
               <span style="color:red">*验证码错误</span>
             </el-col>
            </el-row>
          </el-form-item>

        </el-form>

      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="modifyMobilePhoneNumber">确 定</el-button>
  </span>
    </el-dialog>