diff --git a/pages/CSS/layout/z-index.uvue b/pages/CSS/layout/z-index.uvue
index 64425e22cf10598d051583e8560c7e68ee96ac27..6e88bed634e9556c6ac88ba822b66f22512b4e50 100644
--- a/pages/CSS/layout/z-index.uvue
+++ b/pages/CSS/layout/z-index.uvue
@@ -1,11 +1,11 @@
 <template>
   <view style="flex-grow: 1;">
     <view>
-      <view class="common fixed" style="background-color: red;z-index: 10;">
+      <view class="common fixed default">
         <text>position: fixed</text>
         <text>z-index: 10</text>
       </view>
-      <view class="common fixed" style="background-color: green;z-index: 5;top: 87px;left: 87px;">
+      <view class="common fixed specified">
         <text>position: fixed</text>
         <text>z-index: 5</text>
       </view>
@@ -43,14 +43,29 @@
 </script>
 
 <style>
-  .common {
-    width: 125px;
-    height: 125px;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .fixed {
-    position: fixed;
-  }
+.common {
+  width: 125px;
+  height: 125px;
+  justify-content: center;
+  align-items: center;
+}
+.fixed {
+  position: fixed;
+}
+.default {
+  background-color: red;
+  z-index: 10;
+  top: var(--window-top);
+}
+.specified {
+  background-color: green;
+  z-index: 5;
+  left: 87px;
+  /* #ifdef APP */
+  top: 87px;
+  /* #endif */
+  /* #ifdef H5 */
+  top: calc(var(--window-top) + 87px);
+  /* #endif */
+}
 </style>