From 91b470f8cf2bf9e93cfc99f426a50b14a071b027 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 19 Feb 2024 18:58:47 +0500
Subject: [PATCH] fix layers zIndex issue

---
 client/packages/lowcoder/src/comps/utils/gridCompOperator.ts | 1 +
 client/packages/lowcoder/src/layout/gridLayout.tsx           | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/utils/gridCompOperator.ts b/client/packages/lowcoder/src/comps/utils/gridCompOperator.ts
index 4279ed654b..828b8f286f 100644
--- a/client/packages/lowcoder/src/comps/utils/gridCompOperator.ts
+++ b/client/packages/lowcoder/src/comps/utils/gridCompOperator.ts
@@ -173,6 +173,7 @@ export class GridCompOperator {
       this.doDelete(editorState, compRecords) &&
       messageInstance.info(trans("gridCompOperator.deleteCompsSuccess", { undoKey }));
     };
+
     if (compNum > 1) {
       CustomModal.confirm({
         title: trans("gridCompOperator.deleteCompsTitle"),
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 0058ff71f2..6b697c0c0c 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -1003,6 +1003,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
 
     // log.debug("GridLayout render. layout: ", layout, " oriLayout: ", this.state.layout, " extraLayout: ", this.props.extraLayout);
     const layouts = Object.values(layout);
+    const maxLayoutPos = Math.max(...layouts.map(l => l.pos || 0))
     return (
       <LayoutContainer
         ref={this.ref}
@@ -1027,10 +1028,10 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
         >
           <div style={contentStyle}>
             {showGridLines && this.gridLines()}
-            {mounted &&
+            {mounted && 
               layouts.map((item) => {
                 const zIndex = item.pos !== undefined
-                  ? layouts.length - item.pos
+                  ? (maxLayoutPos - item.pos) + 1
                   : 1;
                 return this.processGridItem(zIndex, item, childrenMap)
               })