更新CSS示例

pages/CSS/layout/z-index.uvue

 <template>
   <view style="flex-grow: 1;">
+    <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 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;transform: translate(125rpx, -125rpx);z-index: 5;"
+      <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;transform: translate(250rpx, -250rpx);">
+      <view class="common" style="background-color: blue;top: -150rpx;left: 350rpx;">
         <text>z-index: 0</text>
       </view>
     </view>
+  </view>
 </template>
 
 <script>
@@ -37,4 +49,8 @@
     justify-content: center;
     align-items: center;
   }
+
+  .fixed {
+    position: fixed;
+  }
 </style>