diff --git a/devui/overlay/src/fixed-overlay.tsx b/devui/overlay/src/fixed-overlay.tsx
index 5b6e903c0d5b11327d00a9061505460f87bbc421..ea6aaadb392a186689298c9f5cb229cd755bff0e 100644
--- a/devui/overlay/src/fixed-overlay.tsx
+++ b/devui/overlay/src/fixed-overlay.tsx
@@ -20,22 +20,14 @@ export const FixedOverlay = defineComponent({
     const overlayRef = ref<HTMLDivElement | null>(null);
     const handleBubbleCancel = (event: Event) => (event.cancelBubble = true);
 
-    const panelStyle: CSSProperties = {
-      position: 'fixed',
-      top: '0',
-      left: '0',
-      width: '100vw',
-      height: '100vh',
-      display: 'flex',
-    };
     return () => (
       <CommonOverlay>
-        <div v-show={props.visible} class={containerClass}>
-          <div
-            class={panelClass}
-            style={panelStyle}
-            onClick={handleBackdropClick}
-          >
+        <div
+          v-show={props.visible}
+          class={containerClass.value}
+          onClick={handleBackdropClick}
+        >
+          <div class={panelClass.value}>
             <div
               ref={overlayRef}
               class="d-overlay"
diff --git a/devui/overlay/src/flexible-overlay.tsx b/devui/overlay/src/flexible-overlay.tsx
index 6129b18756fe8f5e8dbad77bbe9bba3791e7cd8f..1bc253676a9b8dbf2d8040520296dec1d04f73e5 100644
--- a/devui/overlay/src/flexible-overlay.tsx
+++ b/devui/overlay/src/flexible-overlay.tsx
@@ -84,6 +84,10 @@ export const FlexibleOverlay = defineComponent({
         });
       });
 
+      watch(toRef(props, 'position'), () => {
+        handleChange();
+      });
+
       const resizeObserver = new ResizeObserver((entries) => {
         handleRectChange(entries[0].contentRect);
       });
diff --git a/devui/overlay/src/overlay.scss b/devui/overlay/src/overlay.scss
index f07525797b7e1f4c50f2809b9d05e88a978cede7..9dac185c9d48dd3dd26153cf74cc4d3257404f24 100644
--- a/devui/overlay/src/overlay.scss
+++ b/devui/overlay/src/overlay.scss
@@ -4,6 +4,7 @@
   left: 0;
   height: 100%;
   width: 100%;
+  display: flex;
 
   &__disabled {
     pointer-events: none;
diff --git a/sites/components/overlay/index.md b/sites/components/overlay/index.md
index 6ea87353260edb3336b4df4153b0ebb08c5bc98b..9e62a2379031c9cc9fa47fb585a7fede582bf07e 100644
--- a/sites/components/overlay/index.md
+++ b/sites/components/overlay/index.md
@@ -1,46 +1,128 @@
 ## 浮层
-
+浮层属于基础组件，用于构建独立于当前页面布局的组件。
+### 何时使用
+当你需要全局弹窗，或者需要元素跟随功能，便可以使用该组件。
 ### 固定浮层
-<d-button @click="() => fixedVisible = !fixedVisible">{{fixedVisible ? '隐藏' : '显示固定浮层' }}</d-button>
-<d-fixed-overlay v-model:visible="fixedVisible" wrapperClass="justify-center items-center" backgroundBlock>
-  <div style="height: 100px; width: 100px; background: red;">hello world</div>
-</d-fixed-overlay>
 
+:::demo 使用`sm`，`''`，`lg`来定义`Search`基本类型
 
-### 弹性浮层
-<div class="h-1000 w-full flex items-center justify-center">
-  <div ref="origin" class="flex items-center justify-center h-100 w-100 text-white bg-gray">orgin</div>
-  <d-button @click="() => visible = !visible">{{visible ? '隐藏' : '显示' }}</d-button>
-</div>
+```vue
+<template>
+  <d-button @click="handleClick" style="width: 100px;">{{title}}</d-button>
+  <d-fixed-overlay 
+    v-model:visible="visible" 
+    backgroundClass="justify-center items-center bg-gray-50" 
+    backgroundBlock
+  >
+    <div class="h-100 w-100" style="background: red;">hello world</div>
+  </d-fixed-overlay>
+</template>
+<script>
+import { defineComponent, ref, computed } from 'vue';
+export default defineComponent({
+  setup() { 
+    const origin = ref();
+    const visible = ref(false);
+    const handleClick = () => visible.value = !visible.value;
+    const title = computed(() => visible.value ? '隐藏' : '显示固定浮层' );
+    return {
+      visible,
+      handleClick,
+      title
+    }
+  },
+});
+</script>
+```
+:::
 
-<d-flexible-overlay :origin="origin" v-model:visible="visible">
-  <div style="height: 100px; width: 100px; background: red;">hello world</div>
-</d-flexible-overlay>
 
+### 弹性浮层
+
+:::demo
+```vue
+<template>
+  <div class="h-500 w-full flex flex-column items-center justify-center">
+    <div 
+      ref="origin" 
+      class="flex items-center justify-center h-100 w-100 text-white bg-gray"
+    >orgin</div>
+    <d-button @click="handleVisible" style="margin: 20px;">{{title}}</d-button>
+    <div class="w-full mt-20">
+      <div class="flex mt-20">
+        <span style="width: 200px">依赖元素的 X 轴：</span>
+        <d-radio-group v-model="position.originX" :values="horizontalProps" css-style="row"/>
+      </div>
+      <div class="flex mt-20">
+        <span style="width: 200px">依赖元素的 Y 轴：</span>
+        <d-radio-group v-model="position.originY" :values="verticalProps" css-style="row"/>
+      </div>
+      <div class="flex mt-20">
+        <span style="width: 200px">Overlay X 轴：</span>
+        <d-radio-group v-model="position.overlayX" :values="horizontalProps" css-style="row"/>
+      </div>
+      <div class="flex mt-20">
+        <span style="width: 200px">Overlay Y 轴：</span>
+        <d-radio-group v-model="position.overlayY" :values="verticalProps" css-style="row"/>
+      </div>
+    </div>
+  </div>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue'
+  <d-flexible-overlay 
+    :origin="origin" 
+    v-model:visible="visible"
+    :position="position"
+  >
+    <div 
+      class="flex items-center justify-center text-white-50 h-100 w-100"
+      style="background: #673ab7;"
+    >hello world</div>
+  </d-flexible-overlay>
+</template>
+<script>
+import { defineComponent, ref, computed, reactive } from 'vue'
 
 export default defineComponent({
   setup() { 
     const origin = ref();
     const visible = ref(false);
-    const fixedVisible = ref(false);
-    onMounted(() => {
-      console.log(origin.value);
+    const title = computed(() => visible.value ? '隐藏' : '显示')
+    const handleVisible = () => visible.value = !visible.value;
+    
+    const horizontalProps = ['left', 'center', 'right'];
+    const verticalProps = ['top', 'center', 'bottom'];
+    const position = reactive({
+      originX: 'left', 
+      originY: 'top', 
+      overlayX: 'left', 
+      overlayY: 'top'
     });
+
     return {
       origin,
-      fixedVisible,
-      visible
+      visible,
+      handleVisible,
+      title,
+      position,
+      verticalProps, 
+      horizontalProps
     }
-  },
+  }
 })
 </script>
+```
+
+:::
+
 <style>
 .flex {
   display: flex;
 }
+
+.flex-column {
+  flex-direction: column;
+}
+
 .items-center {
   align-items: center;
 }
@@ -65,12 +147,52 @@ export default defineComponent({
   background: gray;
 }
 
-.h-1000 {
-  height: 1000px;
+.h-500 {
+  height: 500px;
 }
 
 .w-full {
   width: 100%;
 }
 
-</style>
\ No newline at end of file
+.bg-gray-50 {
+  background: #00000088;
+}
+
+.text-white-50 {
+  color: #ffffff88;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+</style>
+
+
+### API 
+d-fixed-overlay 参数
+
+|       参数       |            类型            | 默认  | 说明                                                              |
+| :--------------: | :------------------------: | :---: | :---------------------------------------------------------------- |
+|     visible      |         `boolean`          | false | 可选，浮层是否可见                                                |
+| 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`       |  --   | 可选，浮层的样式                                                  |
+
+d-flexible-overlay 参数
+
+|       参数       |                                                                                                    类型                                                                                                    | 默认  | 说明                                                              |
+| :--------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---: | :---------------------------------------------------------------- |
+|     visible      |                                                                                                 `boolean`                                                                                                  | false | 可选，浮层是否可见                                                |
+| 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 | 必选，你必须指定起点元素才能让浮层与该元素连接在一起              |
+|     position     | `{originX: HorizontalPos, originY: VerticalPos, overlayX: HorizontalPos, overlayY: VerticalPos } (type HorizontalPos = 'left' \| 'center' \| 'right') ( type VerticalPos = 'top' \| 'center' \| 'bottom')` | false | 可选，指定浮层与原点的连接点                                      |