diff --git a/packages/artplayer/src/contextmenu/index.js b/packages/artplayer/src/contextmenu/index.js
index 32ede6e58..dd9e6c4d1 100644
--- a/packages/artplayer/src/contextmenu/index.js
+++ b/packages/artplayer/src/contextmenu/index.js
@@ -8,6 +8,7 @@ import close from './close';
 let id = 0;
 export default class Contextmenu {
   constructor(art) {
+    id = 0;
     this.art = art;
     this.init();
   }
diff --git a/packages/artplayer/src/controls/index.js b/packages/artplayer/src/controls/index.js
index ca9987b6e..dd51b90f0 100644
--- a/packages/artplayer/src/controls/index.js
+++ b/packages/artplayer/src/controls/index.js
@@ -15,6 +15,7 @@ import Quality from './quality';
 let id = 0;
 export default class Controls {
   constructor(art) {
+    id = 0;
     this.art = art;
     this.art.on('firstCanplay', () => {
       this.init();
diff --git a/packages/artplayer/src/layers.js b/packages/artplayer/src/layers.js
index 8bf6a7808..f12fbff86 100644
--- a/packages/artplayer/src/layers.js
+++ b/packages/artplayer/src/layers.js
@@ -3,6 +3,7 @@ import { append, setStyles, setStyle, insertByIndex } from './utils';
 let id = 0;
 export default class Layers {
   constructor(art) {
+    id = 0;
     this.art = art;
     this.add = this.add.bind(this);
     this.art.option.layers.forEach(item => {
diff --git a/packages/artplayer/src/setting/index.js b/packages/artplayer/src/setting/index.js
index 918ae06e3..34c79f0e9 100644
--- a/packages/artplayer/src/setting/index.js
+++ b/packages/artplayer/src/setting/index.js
@@ -1,15 +1,14 @@
-import { setStyle, append } from '../utils';
+import { setStyle, append, insertByIndex } from '../utils';
 import Common from './common';
 
 let id = 0;
 export default class Setting {
   constructor(art) {
+    id = 0;
     this.art = art;
     this.state = false;
-    this.$settings = [];
     if (art.option.setting) {
       this.init();
-      this.mount();
     }
   }
 
@@ -29,6 +28,7 @@ export default class Setting {
   }
 
   add(setting) {
+    const { refs } = this.art;
     const { option } = setting;
     if (option && !option.disable) {
       id++;
@@ -39,23 +39,12 @@ export default class Setting {
       $setting.dataset.settingIndex = option.index || id;
       append($setting, `<div class="art-setting-header">${this.art.i18n.get(title)}</div>`);
       append($setting, '<div class="art-setting-body"></div>');
-      this.$settings.push($setting);
       setting.apply && setting.apply(this.art, $setting);
-      this[name] = setting;
+      this[name] = $setting;
+      insertByIndex(refs.$settingBody, $setting, option.index || id);
     }
   }
 
-  mount() {
-    this.$settings
-      .sort(
-        (a, b) =>
-          Number(a.dataset.settingIndex) - Number(b.dataset.settingIndex)
-      )
-      .forEach($setting => {
-        append(this.art.refs.$settingBody, $setting);
-      });
-  }
-
   show() {
     const { refs: { $setting }, i18n, notice } = this.art;
     setStyle($setting, 'display', 'flex');
diff --git a/packages/artplayer/src/style/layers.scss b/packages/artplayer/src/style/layers.scss
index f1f22b690..f0052a2db 100644
--- a/packages/artplayer/src/style/layers.scss
+++ b/packages/artplayer/src/style/layers.scss
@@ -8,10 +8,8 @@
         bottom: 0;
         width: 100%;
         height: 100%;
-        pointer-events: none;
-    
+        pointer-events: none;    
         .art-layer {
-            position: absolute;
             pointer-events: all;
         }
     }