el-dialog改变弹出框的位置_el-dialog修改出现的位置

     通过类样式和定位来操作

• class
• custom-class

使用chrome开发者工具可以看到el-dialog基本结构:

        class是给弹出框的父节点添加类样式

        custom-class是给弹出框添加类样式，与el-dialog同级

如果要想改变el-dialog的位置，有两种方式：

第一种方式，

1. el-dialog添加class类样式
2. 必须要放在全局样式中

//注意style不能加scoped
<style>
//test-dialog是添加的类样式
.test-dialog .el-dialog{
  position: absolute;
  left: 20px;
  top: -30px;
}
</style>

第二种方式 

1.  给el-dialog添加custom-class类样式
2. 放在全局样式中

   <style lang="scss">
   //虽然可以看到添加成功，但是el-dialog的样式还是会覆盖掉这个
   .test-dialog{
     position: absolute;
     font-size: 20px;
     left: 20px;
     top: -30px;
   }
   </style>
   

 注意：这种不能通过定位来改变弹出框位置，只能改变原本el-dialog没有定义的样式，比如说字体等