diff --git a/src/badge/index.js b/src/badge/index.js
index 13c7b09..d20c3a6 100644
--- a/src/badge/index.js
+++ b/src/badge/index.js
@@ -25,7 +25,7 @@ class Badge extends Component {
         display: inline-block;
       }
       .num {
-        z-index: 100;
+        z-index: 1;
         position: absolute;
         display: inline-flex;
         justify-content: center;
@@ -41,7 +41,7 @@ class Badge extends Component {
         background: var(--color-blue-3);
       }
       :host([is-dot])::after {
-        z-index: 100;
+        z-index: 1;
         position: absolute;
         height: 8px;
         width: 8px;
diff --git a/src/image/preview.js b/src/image/preview.js
index eed818a..d2cc274 100644
--- a/src/image/preview.js
+++ b/src/image/preview.js
@@ -20,7 +20,7 @@ class ImagePreview extends Component {
   active = 0
   static styles = css`
     :host {
-      z-index: 1000;
+      z-index: 1;
       position: fixed;
       display: none;
       width: 100%;
@@ -52,7 +52,6 @@ class ImagePreview extends Component {
     }
     .toggle-btn {
       user-select: none;
-      z-index: 100;
       cursor: pointer;
       position: absolute;
       display: flex;
@@ -220,15 +219,6 @@ class ImagePreview extends Component {
     })
     return html`
       <div class="wrapper">
-        <div class="left toggle-btn" @click=${this.pre}>
-          <wc-icon name="left"></wc-icon>
-        </div>
-        <div class="right toggle-btn" @click=${this.next}>
-          <wc-icon name="right"></wc-icon>
-        </div>
-        <div class="close toggle-btn" @click=${this.close}>
-          <wc-icon name="close"></wc-icon>
-        </div>
         <div class="images" ref="images" style=${translate}>
           ${this.list.map(
             (url, index) =>
@@ -241,6 +231,15 @@ class ImagePreview extends Component {
               />`
           )}
         </div>
+        <div class="left toggle-btn" @click=${this.pre}>
+          <wc-icon name="left"></wc-icon>
+        </div>
+        <div class="right toggle-btn" @click=${this.next}>
+          <wc-icon name="right"></wc-icon>
+        </div>
+        <div class="close toggle-btn" @click=${this.close}>
+          <wc-icon name="close"></wc-icon>
+        </div>
         <div class="tools-bar">
           <wc-icon name="zoomIn" @click=${this.zoomIn}></wc-icon>
           <wc-icon name="zoomOut" @click=${this.zoomOut}></wc-icon>