fix(module:message): fix the z-index of overlay (#8081)

Author: HyperLife1119

components/message/base.ts

@@ -54,8 +54,8 @@ export abstract class NzMNService {
     });
     const componentPortal = new ComponentPortal(ctor, null, this.injector);
     const componentRef = overlayRef.attach(componentPortal);
-    const overlayPane = overlayRef.overlayElement;
-    overlayPane.style.zIndex = '1010';
+    const overlayWrapper = overlayRef.hostElement;
+    overlayWrapper.style.zIndex = '1010';
 
     if (!containerInstance) {
       this.container = containerInstance = componentRef.instance;

components/message/message.spec.ts

@@ -3,7 +3,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, inject, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { NzConfigService, NZ_CONFIG } from 'ng-zorro-antd/core/config';
+import { NZ_CONFIG, NzConfigService } from 'ng-zorro-antd/core/config';
 import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
 import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/component-bed';
 
@@ -57,7 +57,9 @@ describe('message', () => {
     fixture.detectChanges();
     overlayContainerElement = overlayContainer.getContainerElement();
 
-    expect((overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement).style.zIndex).toBe('1010');
+    expect((overlayContainerElement.querySelector('.cdk-global-overlay-wrapper') as HTMLElement).style.zIndex).toBe(
+      '1010'
+    );
     expect(overlayContainerElement.textContent).toContain('SUCCESS');
     expect(overlayContainerElement.querySelector('.anticon-check-circle')).not.toBeNull();
   });

components/style/patch.less

@@ -1,15 +1,5 @@
 @import './themes/@{root-entry-name}.less';
-
-// cdk overlay
-.cdk-overlay-container {
-  pointer-events: none;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  position: fixed;
-  z-index: 1000;
-}
+@import '~@angular/cdk/overlay-prebuilt.css';
 
 .cdk-visually-hidden {
   border: 0;
@@ -25,66 +15,16 @@
   -moz-appearance: none;
 }
 
-.cdk-overlay-backdrop {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  -webkit-tap-highlight-color: transparent;
-  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-  opacity: 0;
-  position: absolute;
-  pointer-events: auto;
-  z-index: 1000;
-
-  &.ant-modal-mask {
-    opacity: 1;
-  }
-}
-
-.cdk-overlay-pane {
-  position: absolute;
-  pointer-events: auto;
-  z-index: 1000; // Give an opportunity to the content own to manage their z-index such as Modal
-}
-
-.cdk-overlay-connected-position-bounding-box {
-  position: absolute;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  min-width: 1px;
-  min-height: 1px;
-}
-
-// Used when disabling global scrolling.
-.cdk-global-scrollblock {
-  position: fixed;
-
-  // Necessary for the content not to lose its width. Note that we're using 100%, instead of
-  // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
-  // that the element had before we made it `fixed`.
-  width: 100%;
-
-  // Note: this will always add a scrollbar to whatever element it is on, which can
-  // potentially result in double scrollbars. It shouldn't be an issue, because we won't
-  // block scrolling on a page that doesn't have a scrollbar in the first place.
-  overflow-y: scroll;
-
-  // https://github.com/angular/material2/issues/15051
-  body {
-    overflow-x: visible;
-  }
-}
-
 .nz-overlay-transparent-backdrop {
+
   &,
   &.cdk-overlay-backdrop-showing {
     opacity: 0;
   }
 }
 
 .nz-animate-disabled {
+
   // badge
   &.ant-scroll-number-only {
     animation: none;
@@ -98,7 +38,7 @@
       transition: none;
     }
 
-    & > * {
+    &>* {
       transition: none;
     }
   }
@@ -131,18 +71,19 @@
     .ant-menu-submenu-title .anticon {
       transition: none;
 
-      & + span {
+      &+span {
         transition: none;
       }
     }
   }
 
   // tabs
   &.ant-tabs {
+
     .ant-tabs-top-content.ant-tabs-content-animated,
     .ant-tabs-bottom-content.ant-tabs-content-animated,
-    .ant-tabs-top-content > .ant-tabs-tabpane,
-    .ant-tabs-bottom-content > .ant-tabs-tabpane,
+    .ant-tabs-top-content>.ant-tabs-tabpane,
+    .ant-tabs-bottom-content>.ant-tabs-tabpane,
     &.ant-tabs-left .ant-tabs-ink-bar-animated,
     &.ant-tabs-right .ant-tabs-ink-bar-animated,
     &.ant-tabs-top .ant-tabs-ink-bar-animated,
@@ -152,7 +93,7 @@
   }
 
   // collapse
-  &.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
+  &.ant-collapse>.ant-collapse-item>.ant-collapse-header .ant-collapse-arrow svg {
     transition: none;
   }
 }

docs/getting-started.en-US.md

@@ -157,6 +157,10 @@ Then use the component inside the template:
 <button nz-button nzType="primary">Primary</button>
 ```
 
+# Precautions
+
+- `ng-zorro-antd` already contains `@angular/cdk/overlay-prebuilt.css` overlay style, no additional import is required.
+
 ## Other
 
 - [I18n](/docs/i18n/en)

docs/getting-started.zh-CN.md

@@ -153,6 +153,10 @@ export class AppModule { }
 <button nz-button nzType="primary">Primary</button>
 ```
 
+# 注意事项
+
+- `ng-zorro-antd` 已经包含了 `@angular/cdk/overlay-prebuilt.css` 浮层样式，无需额外导入。
+
 ## 其他
 
 - [国际化配置](/docs/i18n/zh)