fix: zIndex miss of message (#45911)

* fix: zIndex miss of message

* fix: modal static index

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: fix zIndex test

* test: update test case

* chore: clean up

* test: coverage

.dumi/theme/slots/Header/index.tsx

@@ -44,7 +44,7 @@ const useStyle = createStyles(({ token, css }) => {
     header: css`
       position: sticky;
       top: 0;
-      z-index: 2000;
+      z-index: 1000;
       max-width: 100%;
       background: ${token.colorBgContainer};
       box-shadow: ${token.boxShadowTertiary};

components/_util/__tests__/useZIndex.test.tsx

@@ -234,7 +234,8 @@ describe('Test useZIndex hooks', () => {
           );
           render(<App />);
           expect(fn).toHaveBeenLastCalledWith(
-            (1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 3 +
+            1000 +
+              containerBaseZIndexOffset[containerKey as ZIndexContainer] * 3 +
               consumerBaseZIndexOffset[key as ZIndexConsumer],
           );
         });
@@ -272,7 +273,7 @@ describe('Test useZIndex hooks', () => {
             comps.forEach((comp) => {
               const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
               const consumerOffset = isColorPicker
-                ? 1000 + containerBaseZIndexOffset.Popover
+                ? containerBaseZIndexOffset.Popover
                 : consumerBaseZIndexOffset[key as ZIndexConsumer];
               expect((comp as HTMLDivElement).style.zIndex).toBe(
                 String(
@@ -287,11 +288,12 @@ describe('Test useZIndex hooks', () => {
             comps.forEach((comp) => {
               const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
               const consumerOffset = isColorPicker
-                ? 1000 + containerBaseZIndexOffset.Popover
+                ? containerBaseZIndexOffset.Popover
                 : consumerBaseZIndexOffset[key as ZIndexConsumer];
               expect((comp as HTMLDivElement).style.zIndex).toBe(
                 String(
-                  (1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 +
+                  1000 +
+                    containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
                     consumerOffset,
                 ),
               );
@@ -317,7 +319,8 @@ describe('Test useZIndex hooks', () => {
 
             expect((document.querySelector(selector3) as HTMLDivElement).style.zIndex).toBe(
               String(
-                (1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 +
+                1000 +
+                  containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
                   consumerBaseZIndexOffset[key as ZIndexConsumer],
               ),
             );
@@ -328,4 +331,28 @@ describe('Test useZIndex hooks', () => {
       });
     });
   });
+
+  it('Modal static func should always use max zIndex', async () => {
+    jest.useFakeTimers();
+
+    const instance = Modal.confirm({
+      title: 'bamboo',
+      content: 'little',
+    });
+
+    await waitFakeTimer();
+
+    expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
+      zIndex: '2000',
+    });
+
+    instance.destroy();
+
+    await waitFakeTimer();
+
+    // Clean up for static method
+    document.body.innerHTML = '';
+
+    jest.useRealTimers();
+  });
 });

components/_util/hooks/useZIndex.tsx

@@ -7,13 +7,23 @@ export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'T
 
 export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu';
 
+// Z-Index control range
+// Container: 1000 + offset 100 (max base + 10 * offset = 2000)
+// Popover: offset 50
+// Notification: Container Max zIndex + componentOffset
+
+const CONTAINER_OFFSET = 100;
+const CONTAINER_OFFSET_MAX_COUNT = 10;
+
+export const CONTAINER_MAX_OFFSET = CONTAINER_OFFSET * CONTAINER_OFFSET_MAX_COUNT;
+
 export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
-  Modal: 0,
-  Drawer: 0,
-  Popover: 70,
-  Popconfirm: 70,
-  Tooltip: 70,
-  Tour: 70,
+  Modal: CONTAINER_OFFSET,
+  Drawer: CONTAINER_OFFSET,
+  Popover: CONTAINER_OFFSET,
+  Popconfirm: CONTAINER_OFFSET,
+  Tooltip: CONTAINER_OFFSET,
+  Tour: CONTAINER_OFFSET,
 };
 export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
   SelectLike: 50,
@@ -35,7 +45,13 @@ export function useZIndex(
   const isContainer = isContainerType(componentType);
   let zIndex = parentZIndex ?? 0;
   if (isContainer) {
-    zIndex += token.zIndexPopupBase + containerBaseZIndexOffset[componentType];
+    zIndex +=
+      // Use preset token zIndex by default but not stack when has parent container
+      (parentZIndex ? 0 : token.zIndexPopupBase) +
+      // Container offset
+      containerBaseZIndexOffset[componentType];
+
+    zIndex = Math.min(zIndex, token.zIndexPopupBase + CONTAINER_MAX_OFFSET);
   } else {
     zIndex += consumerBaseZIndexOffset[componentType];
   }

components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -439,7 +439,7 @@ Array [
                 </span>
                 <div
                   class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
                 >
                   <div
                     class="ant-tooltip-arrow"
@@ -822,7 +822,7 @@ Array [
             </span>
             <div
               class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
             >
               <div
                 class="ant-tooltip-arrow"
@@ -948,7 +948,7 @@ Array [
             </span>
             <div
               class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
             >
               <div
                 class="ant-tooltip-arrow"
@@ -1074,7 +1074,7 @@ Array [
             </span>
             <div
               class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
             >
               <div
                 class="ant-tooltip-arrow"

components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -159,7 +159,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -542,7 +542,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -927,7 +927,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -1310,7 +1310,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -1698,7 +1698,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -2060,7 +2060,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -2385,7 +2385,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
@@ -2793,7 +2793,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
@@ -3419,7 +3419,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
@@ -4069,7 +4069,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                             </div>
                             <div
                               class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                             >
                               <div>
                                 <div
@@ -4900,7 +4900,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                               >
                                 <div>
                                   <div
@@ -5290,7 +5290,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -6050,7 +6050,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 120; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 150; width: 68px;"
                   >
                     <div>
                       <div
@@ -6453,7 +6453,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -6833,7 +6833,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -7213,7 +7213,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -7606,7 +7606,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -7991,7 +7991,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -8376,7 +8376,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -8772,7 +8772,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                   >
                     <div>
                       <div
@@ -9159,7 +9159,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                   >
                     <div>
                       <div
@@ -9563,7 +9563,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                   >
                     <div>
                       <div
@@ -9944,7 +9944,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -10327,7 +10327,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div

components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap

@@ -1049,7 +1049,7 @@ Array [
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                               >
                                 <div>
                                   <div
@@ -1226,7 +1226,7 @@ Array [
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                               >
                                 <div>
                                   <div
@@ -1408,7 +1408,7 @@ Array [
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                               >
                                 <div>
                                   <div
@@ -1635,7 +1635,7 @@ Array [
                             </div>
                             <div
                               class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-range ant-picker-dropdown-placement-bottomLeft"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                             >
                               <div
                                 class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
@@ -2867,7 +2867,7 @@ Array [
             </button>
             <div
               class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
-              style="z-index: 2000;"
+              style="z-index: 1200;"
               tabindex="-1"
             >
               <div
@@ -3537,7 +3537,7 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
             Some contents...
             <div
               class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
-              style="z-index: 2000;"
+              style="z-index: 1200;"
               tabindex="-1"
             >
               <div

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -21299,7 +21299,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div

components/message/style/index.tsx

@@ -1,7 +1,9 @@
 // deps-lint-skip-all
+import type { CSSProperties } from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { CSSProperties } from 'react';
+
+import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -195,7 +197,7 @@ export default genComponentStyleHook(
     return [genMessageStyle(combinedToken)];
   },
   (token) => ({
-    zIndexPopup: token.zIndexPopupBase + 10,
+    zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 10,
     contentBg: token.colorBgElevated,
     contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${
       token.paddingSM

components/modal/ConfirmDialog.tsx

@@ -5,11 +5,13 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import classNames from 'classnames';
 
+import { CONTAINER_MAX_OFFSET } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { devUseWarning } from '../_util/warning';
 import type { ThemeConfig } from '../config-provider';
 import ConfigProvider from '../config-provider';
 import { useLocale } from '../locale';
+import useToken from '../theme/useToken';
 import CancelBtn from './components/ConfirmCancelBtn';
 import OkBtn from './components/ConfirmOkBtn';
 import type { ModalContextProps } from './context';
@@ -31,6 +33,10 @@ export interface ConfirmDialogProps extends ModalFuncProps {
   autoFocusButton?: null | 'ok' | 'cancel';
   rootPrefixCls?: string;
   iconPrefixCls?: string;
+
+  /**
+   * Only passed by static method
+   */
   theme?: ThemeConfig;
 
   /** @private Internal Usage. Do not override this */
@@ -177,8 +183,6 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
     prefixCls,
     wrapClassName,
     rootPrefixCls,
-    iconPrefixCls,
-    theme,
     bodyStyle,
     closable = false,
     closeIcon,
@@ -215,6 +219,63 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
     props.className,
   );
 
+  // ========================= zIndex =========================
+  const [, token] = useToken();
+
+  const mergedZIndex = React.useMemo(() => {
+    if (zIndex !== undefined) {
+      return zIndex;
+    }
+
+    // Static always use max zIndex
+    return token.zIndexPopupBase + CONTAINER_MAX_OFFSET;
+  }, [zIndex, token]);
+
+  // ========================= Render =========================
+  return (
+    <Dialog
+      prefixCls={prefixCls}
+      className={classString}
+      wrapClassName={classNames(
+        { [`${confirmPrefixCls}-centered`]: !!props.centered },
+        wrapClassName,
+      )}
+      onCancel={() => {
+        close?.({ triggerCancel: true });
+        onConfirm?.(false);
+      }}
+      open={open}
+      title=""
+      footer={null}
+      transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)}
+      maskTransitionName={getTransitionName(rootPrefixCls || '', 'fade', props.maskTransitionName)}
+      mask={mask}
+      maskClosable={maskClosable}
+      style={style}
+      styles={{
+        body: bodyStyle,
+        mask: maskStyle,
+        ...styles,
+      }}
+      width={width}
+      zIndex={mergedZIndex}
+      afterClose={afterClose}
+      keyboard={keyboard}
+      centered={centered}
+      getContainer={getContainer}
+      closable={closable}
+      closeIcon={closeIcon}
+      modalRender={modalRender}
+      focusTriggerAfterClose={focusTriggerAfterClose}
+    >
+      <ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
+    </Dialog>
+  );
+};
+
+const ConfirmDialogWrapper: React.FC<ConfirmDialogProps> = (props) => {
+  const { rootPrefixCls, iconPrefixCls, direction, theme } = props;
+
   return (
     <ConfigProvider
       prefixCls={rootPrefixCls}
@@ -222,53 +283,14 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
       direction={direction}
       theme={theme}
     >
-      <Dialog
-        prefixCls={prefixCls}
-        className={classString}
-        wrapClassName={classNames(
-          { [`${confirmPrefixCls}-centered`]: !!props.centered },
-          wrapClassName,
-        )}
-        onCancel={() => {
-          close?.({ triggerCancel: true });
-          onConfirm?.(false);
-        }}
-        open={open}
-        title=""
-        footer={null}
-        transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)}
-        maskTransitionName={getTransitionName(
-          rootPrefixCls || '',
-          'fade',
-          props.maskTransitionName,
-        )}
-        mask={mask}
-        maskClosable={maskClosable}
-        style={style}
-        styles={{
-          body: bodyStyle,
-          mask: maskStyle,
-          ...styles,
-        }}
-        width={width}
-        zIndex={zIndex}
-        afterClose={afterClose}
-        keyboard={keyboard}
-        centered={centered}
-        getContainer={getContainer}
-        closable={closable}
-        closeIcon={closeIcon}
-        modalRender={modalRender}
-        focusTriggerAfterClose={focusTriggerAfterClose}
-      >
-        <ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
-      </Dialog>
+      <ConfirmDialog {...props} />
     </ConfigProvider>
   );
 };
 
 if (process.env.NODE_ENV !== 'production') {
   ConfirmDialog.displayName = 'ConfirmDialog';
+  ConfirmDialogWrapper.displayName = 'ConfirmDialogWrapper';
 }
 
-export default ConfirmDialog;
+export default ConfirmDialogWrapper;

components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -674,7 +674,7 @@ exports[`renders components/modal/demo/nested.tsx extend context correctly 1`] =
   aria-checked="false"
   class="ant-switch"
   role="switch"
-  style="position: relative; z-index: 4000;"
+  style="position: relative; z-index: 0;"
   type="button"
 >
   <div

components/modal/__tests__/__snapshots__/demo.test.tsx.snap

@@ -644,7 +644,7 @@ exports[`renders components/modal/demo/nested.tsx correctly 1`] = `
   aria-checked="false"
   class="ant-switch"
   role="switch"
-  style="position:relative;z-index:4000"
+  style="position:relative;z-index:0"
   type="button"
 >
   <div

components/modal/__tests__/hook.test.tsx

@@ -35,6 +35,7 @@ describe('Modal.hook', () => {
           <Button
             onClick={() => {
               instance = modal.confirm({
+                zIndex: 903,
                 content: (
                   <Context.Consumer>
                     {(name) => <div className="test-hook">{name}</div>}
@@ -55,6 +56,10 @@ describe('Modal.hook', () => {
     expect(document.body.querySelectorAll('.ant-btn').length).toBeTruthy();
     expect(document.body.querySelectorAll('.ant-modal-body').length).toBeTruthy();
 
+    expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
+      zIndex: '903',
+    });
+
     // Update instance
     act(() => {
       instance.update({

components/modal/demo/nested.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Modal, Select, Switch } from 'antd';
+import { Button, message, Modal, notification, Select, Space, Switch } from 'antd';
 
 const options = [
   {
@@ -12,13 +12,16 @@ const options = [
   },
 ];
 
-const App: React.FC = () => {
+const Demo: React.FC = () => {
+  const [messageInstance, messageHolder] = message.useMessage();
+  const [notificationInstance, notificationHolder] = notification.useNotification();
+
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   return (
     <>
       <Switch
-        style={{ position: 'relative', zIndex: 4000 }}
+        style={{ position: 'relative', zIndex: isModalOpen ? 4000 : 0 }}
         checkedChildren="Open"
         unCheckedChildren="Close"
         onChange={(open) => setIsModalOpen(open)}
@@ -78,12 +81,50 @@ const App: React.FC = () => {
               },
             }}
           >
-            <Select open value="1" options={options} />
+            <Space wrap>
+              <Button
+                onClick={() => {
+                  Modal.confirm({
+                    title: 'Are you OK?',
+                    content: 'I am OK',
+                  });
+                }}
+              >
+                Static Confirm
+              </Button>
+
+              <Button
+                onClick={() => {
+                  message.success('Hello World');
+                  notification.success({
+                    message: 'Hello World',
+                  });
+                }}
+              >
+                Static Message, Notification
+              </Button>
+
+              <Button
+                onClick={() => {
+                  messageInstance.success('Hello World');
+                  notificationInstance.success({
+                    message: 'Hello World',
+                  });
+                }}
+              >
+                Hook Message, Notification
+              </Button>
+
+              <Select open value="1" options={options} />
+            </Space>
           </Modal>
         </Modal>
       </Modal>
+
+      {messageHolder}
+      {notificationHolder}
     </>
   );
 };
 
-export default App;
+export default Demo;

components/notification/style/index.ts

@@ -1,7 +1,9 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+
+import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
 import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle, AliasToken } from '../../theme/internal';
+import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genNotificationPlacementStyle from './placement';
 import genStackStyle from './stack';
@@ -255,7 +257,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 
 // ============================== Export ==============================
 export const prepareComponentToken = (token: AliasToken) => ({
-  zIndexPopup: token.zIndexPopupBase + 50,
+  zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
   width: 384,
 });
 

components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -813,7 +813,7 @@ Array [
   </button>,
   <div
     class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
-    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
   >
     <div
       class="ant-popover-arrow"

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -10721,7 +10721,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
               </div>
               <div
                 class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-placement-bottomLeft"
-                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
               >
                 <div
                   class="ant-picker-panel-container"
@@ -11388,7 +11388,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                 >
                   <div>
                     <div

components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1566,7 +1566,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
       </div>
       <div
         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
       >
         <div>
           <div

components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -275,7 +275,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                             </div>
                             <div
                               class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                             >
                               <div>
                                 <div

scripts/post-script.ts

@@ -49,6 +49,7 @@ const DEPRECIATED_VERSION = {
   '5.9.1': ['https://github.com/ant-design/ant-design/issues/44907'],
   '5.10.0': ['https://github.com/ant-design/ant-design/issues/45289'],
   '5.11.0': ['https://github.com/ant-design/ant-design/issues/45742'],
+  '5.11.1': ['https://github.com/ant-design/ant-design/issues/45883'],
 } as const;
 
 function matchDeprecated(v: string) {