diff --git a/src/index-anchor/index.less b/src/index-anchor/index.less
index cdc7a0b26..078819ada 100644
--- a/src/index-anchor/index.less
+++ b/src/index-anchor/index.less
@@ -1,6 +1,7 @@
 @import '../style/var';
 
 .van-index-anchor {
+  z-index: @index-anchor-z-index;
   box-sizing: border-box;
   padding: @index-anchor-padding;
   color: @index-anchor-text-color;
diff --git a/src/index-bar/index.js b/src/index-bar/index.js
index cca4e7466..d37a95347 100644
--- a/src/index-bar/index.js
+++ b/src/index-bar/index.js
@@ -1,5 +1,5 @@
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { GREEN } from '../utils/constant';
 import { isHidden } from '../utils/dom/style';
 import { preventDefault } from '../utils/dom/event';
@@ -43,14 +43,11 @@ export default createComponent({
   ],
 
   props: {
+    zIndex: Number,
     sticky: {
       type: Boolean,
       default: true,
     },
-    zIndex: {
-      type: Number,
-      default: 1,
-    },
     highlightColor: {
       type: String,
       default: GREEN,
@@ -72,6 +69,14 @@ export default createComponent({
   },
 
   computed: {
+    sidebarStyle() {
+      if (isDef(this.zIndex)) {
+        return {
+          zIndex: this.zIndex + 1,
+        };
+      }
+    },
+
     highlightStyle() {
       const { highlightColor } = this;
       if (highlightColor) {
@@ -237,7 +242,7 @@ export default createComponent({
       <div class={bem()}>
         <div
           class={bem('sidebar')}
-          style={{ zIndex: this.zIndex + 1 }}
+          style={this.sidebarStyle}
           onClick={this.onClick}
           onTouchstart={this.touchStart}
           onTouchmove={this.onTouchMove}
diff --git a/src/index-bar/index.less b/src/index-bar/index.less
index ad5c62543..6a58ee974 100644
--- a/src/index-bar/index.less
+++ b/src/index-bar/index.less
@@ -5,6 +5,7 @@
     position: fixed;
     top: 50%;
     right: 0;
+    z-index: @index-bar-sidebar-z-index;
     display: flex;
     flex-direction: column;
     text-align: center;
diff --git a/src/index-bar/test/__snapshots__/demo.spec.js.snap b/src/index-bar/test/__snapshots__/demo.spec.js.snap
index 6be943e5e..8e8a6208f 100644
--- a/src/index-bar/test/__snapshots__/demo.spec.js.snap
+++ b/src/index-bar/test/__snapshots__/demo.spec.js.snap
@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs__content">
       <div role="tabpanel" class="van-tab__pane" style="">
         <div class="van-index-bar">
-          <div class="van-index-bar__sidebar" style="z-index: 2;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
+          <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
           <div>
             <div>
               <div class="van-index-anchor">A</div>
diff --git a/src/index-bar/test/__snapshots__/index.spec.js.snap b/src/index-bar/test/__snapshots__/index.spec.js.snap
index 81a0d7029..f038eef00 100644
--- a/src/index-bar/test/__snapshots__/index.spec.js.snap
+++ b/src/index-bar/test/__snapshots__/index.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`custom anchor text 1`] = `
 <div class="van-index-bar">
-  <div class="van-index-bar__sidebar" style="z-index: 2;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
+  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div>
     <div class="van-index-anchor">Title A</div>
   </div>
@@ -14,7 +14,7 @@ exports[`custom anchor text 1`] = `
 
 exports[`scroll and update active anchor 1`] = `
 <div class="van-index-bar">
-  <div class="van-index-bar__sidebar" style="z-index: 2;"><span data-index="A" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
+  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div data-index="0">
     <div class="van-index-anchor">1</div>
   </div>
@@ -32,12 +32,12 @@ exports[`scroll and update active anchor 1`] = `
 
 exports[`scroll and update active anchor 2`] = `
 <div class="van-index-bar">
-  <div class="van-index-bar__sidebar" style="z-index: 2;"><span data-index="A" class="van-index-bar__index" style="">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
+  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index" style="">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div data-index="0" style="height: 10px;">
-    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: 1; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">1</div>
+    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">1</div>
   </div>
   <div data-index="1" style="height: 10px;">
-    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: 1; transform: translate3d(0, 10px, 0); color: rgb(7, 193, 96);">2</div>
+    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 10px, 0); color: rgb(7, 193, 96);">2</div>
   </div>
   <div data-index="2">
     <div class="van-index-anchor">3</div>
diff --git a/src/style/var.less b/src/style/var.less
index acdbf9af5..a88f96f35 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -369,6 +369,7 @@
 @goods-action-button-danger-color: @gradient-red;
 
 // IndexAnchor
+@index-anchor-z-index: 1;
 @index-anchor-padding: 0 @padding-md;
 @index-anchor-text-color: @text-color;
 @index-anchor-font-weight: @font-weight-bold;
@@ -378,6 +379,7 @@
 @index-anchor-sticky-background-color: @white;
 
 // IndexBar
+@index-bar-sidebar-z-index: 2;
 @index-bar-index-font-size: @font-size-xs;
 @index-bar-index-line-height: 14px;