diff --git a/devui/overlay/src/common-overlay.tsx b/devui/overlay/src/common-overlay.tsx
index 783f16923231e903ff623c35c20cf086260d220e..51a9e5dfbc7c6cba16ea9fca91776eb15a8412ea 100644
--- a/devui/overlay/src/common-overlay.tsx
+++ b/devui/overlay/src/common-overlay.tsx
@@ -5,7 +5,7 @@ export const CommonOverlay = defineComponent({
   setup(props, ctx) {
     return () => (
       <Teleport to="#d-overlay-anchor">
-        <Transition name="d-overlay-fade">
+        <Transition name="devui-overlay-fade">
           {renderSlot(ctx.slots, 'default')}
         </Transition>
       </Teleport>
diff --git a/devui/overlay/src/fixed-overlay.tsx b/devui/overlay/src/fixed-overlay.tsx
index ea6aaadb392a186689298c9f5cb229cd755bff0e..4a84b1c438ceec8a7745bf597c223ba16d4500a3 100644
--- a/devui/overlay/src/fixed-overlay.tsx
+++ b/devui/overlay/src/fixed-overlay.tsx
@@ -14,28 +14,27 @@ export const FixedOverlay = defineComponent({
     },
   },
   setup(props, ctx) {
-    const { containerClass, panelClass, handleBackdropClick } =
-      useOverlayLogic(props);
-
-    const overlayRef = ref<HTMLDivElement | null>(null);
-    const handleBubbleCancel = (event: Event) => (event.cancelBubble = true);
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props);
 
     return () => (
       <CommonOverlay>
         <div
           v-show={props.visible}
-          class={containerClass.value}
+          class={backgroundClass.value}
+          style={props.backgroundStyle}
           onClick={handleBackdropClick}
         >
-          <div class={panelClass.value}>
-            <div
-              ref={overlayRef}
-              class="d-overlay"
-              style={props.overlayStyle}
-              onClick={handleBubbleCancel}
-            >
-              {renderSlot(ctx.slots, 'default')}
-            </div>
+          <div
+            class={overlayClass.value}
+            style={props.overlayStyle}
+            onClick={handleOverlayBubbleCancel}
+          >
+            {renderSlot(ctx.slots, 'default')}
           </div>
         </div>
       </CommonOverlay>
diff --git a/devui/overlay/src/flexible-overlay.tsx b/devui/overlay/src/flexible-overlay.tsx
index cc1a5cdc971a15f94640cdf144bb357e33a33a10..19c55c4f988267c2f0f427941ea9b7cada2ff06f 100644
--- a/devui/overlay/src/flexible-overlay.tsx
+++ b/devui/overlay/src/flexible-overlay.tsx
@@ -109,32 +109,23 @@ export const FlexibleOverlay = defineComponent({
       }
     }, instance);
 
-    const { containerClass, panelClass, handleBackdropClick } =
-      useOverlayLogic(props);
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props);
 
     return () => (
       <CommonOverlay>
-        <div v-show={props.visible} class={containerClass}>
+        <div v-show={props.visible} class={backgroundClass.value} onClick={handleBackdropClick}>
           <div
-            class={panelClass}
-            style={{
-              position: 'fixed',
-              top: '0',
-              left: '0',
-              width: '100vw',
-              height: '100vh',
-              display: 'flex',
-            }}
-            onClick={handleBackdropClick}
+            ref={overlayRef}
+            class={overlayClass.value}
+            style={positionedStyle}
+            onClick={handleOverlayBubbleCancel}
           >
-            <div
-              ref={overlayRef}
-              class="d-overlay"
-              style={positionedStyle}
-              onClick={(event) => (event.cancelBubble = true)}
-            >
-              {renderSlot(ctx.slots, 'default')}
-            </div>
+            {renderSlot(ctx.slots, 'default')}
           </div>
         </div>
       </CommonOverlay>
diff --git a/devui/overlay/src/overlay-types.ts b/devui/overlay/src/overlay-types.ts
index 80b20826335ffd0f82160380a62d8cbd823b1568..766963dc7da907808927892546d38d77a990c303 100644
--- a/devui/overlay/src/overlay-types.ts
+++ b/devui/overlay/src/overlay-types.ts
@@ -1,4 +1,4 @@
-import { ExtractPropTypes, PropType } from 'vue';
+import { ExtractPropTypes, PropType, CSSProperties } from 'vue';
 
 export const overlayProps = {
   visible: {
@@ -15,9 +15,8 @@ export const overlayProps = {
     type: String,
     default: ''
   },
-  hasBackdrop: {
-    type: Boolean,
-    default: true
+  backgroundStyle: {
+    type: [String, Object] as PropType<string | CSSProperties>
   },
   backdropClick: {
     type: Function,
diff --git a/devui/overlay/src/overlay.scss b/devui/overlay/src/overlay.scss
index 9dac185c9d48dd3dd26153cf74cc4d3257404f24..66c0f4a87b04436cedac17fbeef45687f602b06d 100644
--- a/devui/overlay/src/overlay.scss
+++ b/devui/overlay/src/overlay.scss
@@ -1,30 +1,23 @@
-.d-overlay-container {
+.devui-overlay-background {
   position: fixed;
   top: 0;
   left: 0;
-  height: 100%;
-  width: 100%;
+  height: 100vh;
+  width: 100vw;
   display: flex;
 
-  &__disabled {
-    pointer-events: none;
-  }
-
-  &__background {
+  &__color {
     background: rgba(0, 0, 0, 0.4);
   }
 
-  .d-overlay-panel {
+  .devui-overlay {
     position: relative;
     z-index: 1000;
-  }
-
-  .d-overlay {
     pointer-events: auto;
   }
 }
 
-.d-overlay-fade {
+.devui-overlay-fade {
   @mixin d-overlay-fade-animation {
     animation-name: d-overlay-fade;
     animation-duration: 0.3s;
diff --git a/devui/overlay/src/utils.ts b/devui/overlay/src/utils.ts
index 40d7b9476084f080045d76377ed6bcb4ffe64e27..7e8c34d7d9f22a6a9b801945935c8c2ace1677ca 100644
--- a/devui/overlay/src/utils.ts
+++ b/devui/overlay/src/utils.ts
@@ -2,25 +2,18 @@ import { onUnmounted, watch, computed, ComputedRef } from 'vue';
 import { OverlayProps } from './overlay-types';
 
 interface CommonInfo {
-  containerClass: ComputedRef<string[]>
-  panelClass: ComputedRef<string[]>
+  backgroundClass: ComputedRef<string[]>
+  overlayClass: ComputedRef<string>
   handleBackdropClick: (e: Event) => void
+  handleOverlayBubbleCancel: (e: Event) => void
 }
 
 export function useOverlayLogic(props: OverlayProps): CommonInfo {
-  const containerClass = computed(() => {
-    if (props.hasBackdrop) {
-      return ['d-overlay-container', props.backgroundClass];
-    } else {
-      return ['d-overlay-container', 'd-overlay-container__disabled'];
-    }
+  const backgroundClass = computed(() => {
+    return ['devui-overlay-background', 'devui-overlay-background__color', props.backgroundClass];
   });
-  const panelClass = computed(() => {
-    if (props.hasBackdrop) {
-      return ['d-overlay-panel'];
-    } else {
-      return ['d-overlay-panel', 'd-overlay-container__disabled'];
-    }
+  const overlayClass = computed(() => {
+    return 'devui-overlay';
   });
 
   const handleBackdropClick = (event: Event) => {
@@ -32,11 +25,25 @@ export function useOverlayLogic(props: OverlayProps): CommonInfo {
     }
   };
 
+  const handleOverlayBubbleCancel = (event: Event) => (event.cancelBubble = true);
+
+
   const body = document.body;
   const originOverflow = body.style.overflow;
+  const originPosition = body.style.position;
   watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
     if (backgroundBlock) {
-      body.style.overflow = visible ? 'hidden' : originOverflow;
+      const top = body.getBoundingClientRect().y;
+      if (visible) {
+        body.style.overflowY = 'scroll';
+        body.style.position = visible ? 'fixed' : '';
+        body.style.top = `${top}px`;
+      } else {
+        body.style.overflowY = originOverflow;
+        body.style.position = originPosition;
+        body.style.top = '';
+        window.scrollTo(0, -top);
+      }
     }
   });
 
@@ -45,8 +52,9 @@ export function useOverlayLogic(props: OverlayProps): CommonInfo {
   });
 
   return {
-    containerClass,
-    panelClass,
-    handleBackdropClick
+    backgroundClass,
+    overlayClass,
+    handleBackdropClick,
+    handleOverlayBubbleCancel
   }
 }
diff --git a/sites/components/overlay/index.md b/sites/components/overlay/index.md
index 31ab9274042e7a217a9f31358ff73444d4b96879..264cfbc5c4ffd335892f3e245850c2fc1ee6a52b 100644
--- a/sites/components/overlay/index.md
+++ b/sites/components/overlay/index.md
@@ -178,7 +178,6 @@ d-fixed-overlay 参数
 | onUpdate:visible | `(value: boolean) => void` |  --   | 可选，遮罩层取消可见事件                                              |
 | backgroundBlock  |         `boolean`          | false | 可选，如果为 true，背景不能滚动                                       |
 | backgroundClass  |          `string`          |  --   | 可选，背景的样式类                                                    |
-|   hasBackdrop    |         `boolean`          | true  | 可选，如果为false，背景后下的内容将可以触发                           |
 |  backdropClick   |        `() => void`        |  --   | 可选，点击背景触发的事件                                              |
 |  backdropClose   |         `boolean`          | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，默认参数是 false |
 |   overlayStyle   |      `CSSProperties`       |  --   | 可选，遮罩层的样式                                                    |
@@ -191,7 +190,6 @@ d-flexible-overlay 参数
 | onUpdate:visible |                                                                                         `(value: boolean) => void`                                                                                         |  --   | 可选，遮罩层取消可见事件                                          |
 | backgroundBlock  |                                                                                                 `boolean`                                                                                                  | false | 可选，如果为 true，背景不能滚动                                   |
 | backgroundClass  |                                                                                                  `string`                                                                                                  |  --   | 可选，背景的样式类                                                |
-|   hasBackdrop    |                                                                                                 `boolean`                                                                                                  | true  | 可选，如果为false，背景后下的内容将可以触发                       |
 |  backdropClick   |                                                                                                `() => void`                                                                                                |  --   | 可选，点击背景触发的事件                                          |
 |  backdropClose   |                                                                                                 `boolean`                                                                                                  | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，参数是 false |
 |      origin      |                                                     `Element \| ComponentPublicInstance \| { x: number, y: number, width?: number, height?: number }`                                                      | false | 必选，你必须指定起点元素才能让遮罩层与该元素连接在一起            |