z-index示例页面适配web端的标题栏

pages/CSS/layout/z-index.uvue

 <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 {
+.common {
   width: 125px;
   height: 125px;
   justify-content: center;
   align-items: center;
-  }
-
-  .fixed {
+}
+.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>