diff --git a/packages/components/dialog/src/index.vue b/packages/components/dialog/src/index.vue
index 3c52e26279..07e95a35a7 100644
--- a/packages/components/dialog/src/index.vue
+++ b/packages/components/dialog/src/index.vue
@@ -13,46 +13,48 @@
         :z-index="zIndex"
         @click="onModalClick"
       >
-        <div
-          ref="dialogRef"
-          v-trap-focus
-          :class="[
-            'el-dialog',
-            {
-              'is-fullscreen': fullscreen,
-              'el-dialog--center': center,
-            },
-            customClass,
-          ]"
-          aria-modal="true"
-          role="dialog"
-          :aria-label="title || 'dialog'"
-          :style="style"
-          @click.stop=""
-        >
-          <div class="el-dialog__header">
-            <slot name="title">
-              <span class="el-dialog__title">
-                {{ title }}
-              </span>
-            </slot>
-            <button
-              v-if="showClose"
-              aria-label="close"
-              class="el-dialog__headerbtn"
-              type="button"
-              @click="handleClose"
-            >
-              <i class="el-dialog__close el-icon el-icon-close"></i>
-            </button>
-          </div>
-          <template v-if="rendered">
-            <div class="el-dialog__body">
-              <slot></slot>
+        <div class="el-overlay-dialog">
+          <div
+            ref="dialogRef"
+            v-trap-focus
+            :class="[
+              'el-dialog',
+              {
+                'is-fullscreen': fullscreen,
+                'el-dialog--center': center,
+              },
+              customClass,
+            ]"
+            aria-modal="true"
+            role="dialog"
+            :aria-label="title || 'dialog'"
+            :style="style"
+            @click.stop=""
+          >
+            <div class="el-dialog__header">
+              <slot name="title">
+                <span class="el-dialog__title">
+                  {{ title }}
+                </span>
+              </slot>
+              <button
+                v-if="showClose"
+                aria-label="close"
+                class="el-dialog__headerbtn"
+                type="button"
+                @click="handleClose"
+              >
+                <i class="el-dialog__close el-icon el-icon-close"></i>
+              </button>
+            </div>
+            <template v-if="rendered">
+              <div class="el-dialog__body">
+                <slot></slot>
+              </div>
+            </template>
+            <div v-if="$slots.footer" class="el-dialog__footer">
+              <slot name="footer"></slot>
             </div>
-          </template>
-          <div v-if="$slots.footer" class="el-dialog__footer">
-            <slot name="footer"></slot>
           </div>
         </div>
       </el-overlay>
diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss
index 49077424bb..fb3d470c87 100644
--- a/packages/theme-chalk/src/dialog.scss
+++ b/packages/theme-chalk/src/dialog.scss
@@ -99,16 +99,24 @@
   }
 }
 
+.#{$namespace}-overlay-dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .dialog-fade-enter-active {
-  animation: modal-fade-in var(--el-transition-duration) !important;
-  .#{$namespace}-dialog {
+  animation: modal-fade-in var(--el-transition-duration);
+  .#{$namespace}-overlay-dialog {
     animation: dialog-fade-in var(--el-transition-duration);
   }
 }
 
 .dialog-fade-leave-active {
   animation: modal-fade-out var(--el-transition-duration);
-  .#{$namespace}-dialog {
+  .#{$namespace}-overlay-dialog {
     animation: dialog-fade-out var(--el-transition-duration);
   }
 }
@@ -140,7 +148,6 @@
     opacity: 0;
   }
   100% {
-    transform: translate3d(0, 0, 0);
     opacity: 1;
   }
 }