diff --git a/src/style/var.less b/src/style/var.less
index f16d001ab..5989dd020 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -687,6 +687,7 @@
 
 // Tabbar
 @tabbar-height: 50px;
+@tabbar-z-index: 1;
 @tabbar-background-color: @white;
 
 // TabbarItem
diff --git a/src/tabbar/index.js b/src/tabbar/index.js
index 5f37184d6..8d8ba4633 100644
--- a/src/tabbar/index.js
+++ b/src/tabbar/index.js
@@ -9,6 +9,7 @@ export default createComponent({
 
   props: {
     route: Boolean,
+    zIndex: Number,
     activeColor: String,
     inactiveColor: String,
     safeAreaInsetBottom: Boolean,
@@ -24,10 +25,6 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
-    zIndex: {
-      type: Number,
-      default: 1,
-    },
   },
 
   watch: {
diff --git a/src/tabbar/index.less b/src/tabbar/index.less
index 7340ecf94..a1a32bce2 100644
--- a/src/tabbar/index.less
+++ b/src/tabbar/index.less
@@ -1,6 +1,7 @@
 @import '../style/var';
 
 .van-tabbar {
+  z-index: @tabbar-z-index;
   display: flex;
   box-sizing: content-box;
   width: 100%;
diff --git a/src/tabbar/test/__snapshots__/demo.spec.js.snap b/src/tabbar/test/__snapshots__/demo.spec.js.snap
index c0872bbf5..4edc5c2d9 100644
--- a/src/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
       <div class="van-tabbar-item van-tabbar-item--active">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
@@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
       <div class="van-tabbar-item van-tabbar-item--active">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
@@ -75,7 +75,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
       <div class="van-tabbar-item van-tabbar-item--active">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
@@ -111,7 +111,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
       <div class="van-tabbar-item van-tabbar-item--active">
         <div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/vant/user-active.png">
           <div class="van-info">3</div>
@@ -135,7 +135,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
       <div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(7, 193, 96);">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
@@ -167,7 +167,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
       <div class="van-tabbar-item van-tabbar-item--active">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
diff --git a/src/tabbar/test/__snapshots__/index.spec.js.snap b/src/tabbar/test/__snapshots__/index.spec.js.snap
index 87acd4d81..f0b3d6e7e 100644
--- a/src/tabbar/test/__snapshots__/index.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/index.spec.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`disable border 1`] = `<div class="van-tabbar van-tabbar--fixed" style="z-index: 1;"></div>`;
+exports[`disable border 1`] = `<div class="van-tabbar van-tabbar--fixed"></div>`;
 
 exports[`route mode 1`] = `
-<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
   <div class="van-tabbar-item van-tabbar-item--active">
     <div class="van-tabbar-item__icon">
       <!---->
@@ -40,7 +40,7 @@ exports[`route mode 1`] = `
 `;
 
 exports[`route mode 2`] = `
-<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
   <div class="van-tabbar-item">
     <div class="van-tabbar-item__icon">
       <!---->
@@ -77,7 +77,7 @@ exports[`route mode 2`] = `
 `;
 
 exports[`route mode 3`] = `
-<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
   <div class="van-tabbar-item">
     <div class="van-tabbar-item__icon">
       <!---->
@@ -114,7 +114,7 @@ exports[`route mode 3`] = `
 `;
 
 exports[`route mode match by name 1`] = `
-<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
   <div class="van-tabbar-item van-tabbar-item--active">
     <div class="van-tabbar-item__icon">
       <!---->
@@ -135,7 +135,7 @@ exports[`route mode match by name 1`] = `
 `;
 
 exports[`route mode match by name 2`] = `
-<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
   <div class="van-tabbar-item">
     <div class="van-tabbar-item__icon">
       <!---->
@@ -156,7 +156,7 @@ exports[`route mode match by name 2`] = `
 `;
 
 exports[`watch tabbar value 1`] = `
-<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
   <div class="van-tabbar-item">
     <div class="van-tabbar-item__icon">
       <!---->