From 6668d6082210eaa036f1c0d291b641658cc6ccf3 Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Thu, 7 Dec 2023 13:00:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0CSS=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/CSS/layout/z-index.uvue | 36 +++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/pages/CSS/layout/z-index.uvue b/pages/CSS/layout/z-index.uvue
index aa3b84e0..9564f69c 100644
--- a/pages/CSS/layout/z-index.uvue
+++ b/pages/CSS/layout/z-index.uvue
@@ -1,15 +1,27 @@
 <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>
-- 
GitLab