diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less
index 6b2280794..836b98059 100644
--- a/src/nav-bar/index.less
+++ b/src/nav-bar/index.less
@@ -2,6 +2,7 @@
 
 .van-nav-bar {
   position: relative;
+  z-index: @nav-bar-z-index;
   height: @nav-bar-height;
   line-height: @nav-bar-height;
   text-align: center;
diff --git a/src/nav-bar/index.tsx b/src/nav-bar/index.tsx
index c732ad29b..6a6cc2376 100644
--- a/src/nav-bar/index.tsx
+++ b/src/nav-bar/index.tsx
@@ -82,6 +82,7 @@ function NavBar(
 NavBar.props = {
   title: String,
   fixed: Boolean,
+  zIndex: Number,
   leftText: String,
   rightText: String,
   leftArrow: Boolean,
@@ -89,10 +90,6 @@ NavBar.props = {
     type: Boolean,
     default: true,
   },
-  zIndex: {
-    type: Number,
-    default: 1,
-  },
 };
 
 export default createComponent<NavBarProps, NavBarEvents>(NavBar);
diff --git a/src/nav-bar/test/__snapshots__/demo.spec.js.snap b/src/nav-bar/test/__snapshots__/demo.spec.js.snap
index dfef9f12a..5e435b9cb 100644
--- a/src/nav-bar/test/__snapshots__/demo.spec.js.snap
+++ b/src/nav-bar/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
+    <div class="van-nav-bar van-hairline--bottom">
       <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
           <!----></i><span class="van-nav-bar__text">返回</span></div>
       <div class="van-nav-bar__title van-ellipsis">标题</div>
@@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
+    <div class="van-nav-bar van-hairline--bottom">
       <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
           <!----></i><span class="van-nav-bar__text">返回</span></div>
       <div class="van-nav-bar__title van-ellipsis">标题</div>
diff --git a/src/nav-bar/test/__snapshots__/index.spec.js.snap b/src/nav-bar/test/__snapshots__/index.spec.js.snap
index 092b64cdc..2f5067a45 100644
--- a/src/nav-bar/test/__snapshots__/index.spec.js.snap
+++ b/src/nav-bar/test/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render left & right slot 1`] = `
-<div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
+<div class="van-nav-bar van-hairline--bottom">
   <div class="van-nav-bar__left">Custom Left</div>
   <div class="van-nav-bar__title van-ellipsis"></div>
   <div class="van-nav-bar__right">Custom Right</div>
@@ -9,7 +9,7 @@ exports[`render left & right slot 1`] = `
 `;
 
 exports[`render title slot 1`] = `
-<div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
+<div class="van-nav-bar van-hairline--bottom">
   <div class="van-nav-bar__left"></div>
   <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
   <div class="van-nav-bar__right"></div>
diff --git a/src/style/var.less b/src/style/var.less
index 3926b3714..f16d001ab 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -427,6 +427,7 @@
 @nav-bar-text-color: @blue;
 @nav-bar-title-font-size: @font-size-lg;
 @nav-bar-title-text-color: @text-color;
+@nav-bar-z-index: 1;
 
 // NoticeBar
 @notice-bar-height: 40px;