Add the "zOffset" parameter, which is the start offset of the z-index.

example/src/index.html

@@ -104,6 +104,11 @@
         <br />
         <a href="https://github.com/michitaro/vue-window/blob/master/example/src/sample8.vue" target="_blank">(code)</a>
       </li>
+        <li>
+            <a href="?Sample9">z-index offset</a>
+            <br />
+            <a href="https://github.com/michitaro/vue-window/blob/master/example/src/sample9.vue" target="_blank">(code)</a>
+        </li>
     </ul>
     <a class="github" href="https://github.com/michitaro/vue-window" target="_blank">View on Github</a>
   </footer>

example/src/main.ts

@@ -8,6 +8,7 @@ import Sample5 from "./sample5.vue"
 import Sample6 from "./sample6.vue"
 import Sample7 from "./sample7.vue"
 import Sample8 from "./sample8.vue"
+import Sample9 from "./sample9.vue"
 
 
 Vue.use(VueWindow)
@@ -23,6 +24,7 @@ window.addEventListener('load', e => {
     Sample6,
     Sample7,
     Sample8,
+    Sample9,
   } as any)[location.search.substr(1)] || Sample1
   new Vue({
     el: emptyElement(),

example/src/sample9.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <hsc-window-style-metal>
+      <template v-for="i in [1, 2, 3]">
+        <hsc-window :key="i" :title="`No offset #${i}`" :zGroup="0">
+          <fieldset>
+            <legend>&alpha;</legend>
+            <input type="range"/>
+          </fieldset>
+        </hsc-window>
+      </template>
+    </hsc-window-style-metal>
+
+    <hsc-window-style-metal>
+      <template v-for="i in [1, 2, 3]">
+        <hsc-window :key="i" :title="`No offset-2 #${i}`" :zGroup="1">
+          <fieldset>
+            <legend>&alpha;</legend>
+            <input type="range"/>
+          </fieldset>
+        </hsc-window>
+      </template>
+    </hsc-window-style-metal>
+
+    <hsc-window-style-black>
+      <template v-for="i in [1, 2, 3]">
+        <hsc-window :key="i" :title="`Offset 50- #${i}`" :zGroup="2" :zOffset="50">
+          <fieldset>
+            <legend>&alpha;</legend>
+            <input type="range"/>
+          </fieldset>
+        </hsc-window>
+      </template>
+    </hsc-window-style-black>
+
+    <hsc-window-style-white>
+      <template v-for="i in [1, 2, 3]">
+        <hsc-window :key="i" :title="`Offset 100- #${i}`" :zGroup="3" :zOffset="100">
+          <fieldset>
+            <legend>&alpha;</legend>
+            <input type="range"/>
+          </fieldset>
+        </hsc-window>
+      </template>
+    </hsc-window-style-white>
+
+    <p>
+      Floating windows always appear in foreground of windows on base layer.
+    </p>
+
+    <div style="width: 100px; height: 100px; background-color: darkred; z-index: 50; position: absolute; left: calc(100vw / 2 - 50px); top: calc(100vh / 2 - 50px)">
+      z-index: 50
+    </div>
+  </div>
+</template>

src/window/script.ts

@@ -49,6 +49,9 @@ export class WindowType extends Vue {
   @Prop({ type: Number, default: 0 })
   zGroup!: number
 
+  @Prop({ type: Number, default: 0 })
+  zOffset?: number
+
   @Prop({ default: 'visible' })
   overflow!: string
 
@@ -64,7 +67,7 @@ export class WindowType extends Vue {
 
   mounted() {
     instances.push(this)
-    this.zElement = new ZElement(this.zGroup, zIndex => this.zIndex = `${zIndex}`)
+    this.zElement = new ZElement(this.zGroup, zIndex => this.zIndex = `${zIndex}`, this.zOffset)
     this.isOpen && this.onIsOpenChange(true)
     windows.add(this)
   }

src/z_element.ts

@@ -1,7 +1,7 @@
 export class ZElement {
   zIndex?: number
 
-  constructor(private _group: number, public onChange: (zIndex: number) => void) {
+  constructor(private _group: number, public onChange: (zIndex: number) => void, private _offset: number = 0) {
     this.a(a => a.push(this))
   }
 
@@ -17,6 +17,10 @@ export class ZElement {
   get group() {
     return this._group
   }
+
+  get zIndexOffset(): number {
+    return this._offset
+  }
 
   unregister() {
     this.a(a => a.splice(a.indexOf(this), 1))
@@ -66,15 +70,18 @@ function compare(a: number, b: number): number {
 
 
 function refresh() {
-  let zIndex = BASE
+  let zIndex: number = BASE
   for (const g of keys(registry).sort(compare)) {
-    for (const z of a(g)) {
-      if (zIndex != z.zIndex) {
-        z.zIndex = zIndex
-        z.onChange(zIndex)
+    const groups: ZElement[] = a(g)
+    let groupIndex: number = (groups[0] && groups[0].zIndexOffset) ? Number(groups[0].zIndexOffset) : zIndex
+    for (const z of groups) {
+      if (groupIndex != z.zIndex) {
+        z.zIndex = groupIndex
+        z.onChange(groupIndex)
       }
-      zIndex++
+      groupIndex++
     }
+    zIndex += groups.length
   }
 }