更新CSS示例

pages/CSS/layout/z-index.uvue

 <template>
   <view style="flex-grow: 1;">
-    <view class="common" style="background-color: red;z-index: 10;">
-      <text>z-index: 10</text>
+    <view>
+      <view class="common fixed" style="background-color: red;z-index: 10;">
+        <text>position: fixed</text>
+        <text>z-index: 10</text>
+      </view>
+      <view class="common fixed" style="background-color: green;z-index: 5;top: 175rpx;left: 175rpx;">
+        <text>position: fixed</text>
+        <text>z-index: 5</text>
+      </view>
     </view>
-    <view ref="view" class="common" style="background-color: green;transform: translate(125rpx, -125rpx);z-index: 5;"
-      @click="changeZIndex(20)">
-      <text>z-index: {{zIndex}}</text>
-      <text>点击修改z-index</text>
-    </view>
-    <view class="common" style="background-color: blue;transform: translate(250rpx, -250rpx);">
-      <text>z-index: 0</text>
+    <view style="top: 500rpx;">
+      <view class="common" style="background-color: red;z-index: 10;">
+        <text>z-index: 10</text>
+      </view>
+      <view ref="view" class="common" style="background-color: green;z-index: 5;top: -75rpx;left: 175rpx;"
+        @click="changeZIndex(20)">
+        <text>z-index: {{zIndex}}</text>
+        <text>点击修改z-index</text>
+      </view>
+      <view class="common" style="background-color: blue;top: -150rpx;left: 350rpx;">
+        <text>z-index: 0</text>
+      </view>
     </view>
   </view>
 </template>
@@ -37,4 +49,8 @@
     justify-content: center;
     align-items: center;
   }
-</style>
\ No newline at end of file
+
+  .fixed {
+    position: fixed;
+  }
+</style>