fix(module:cdk): zIndex is not used properly when creating overlay

[ParsaArvanehPA]

PR Checklist

Please check if your PR fulfills the following requirements:

• [✔] The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
• [] Tests for the changes have been added (for bug fixes / features)
• [] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[✔] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

The modal, drawer, or any other components that are made with the Angular CDK have the zIndex applied to the inner element of the created overlay. This is not desirable for two reasons:

1. The created overlay is a direct child of the body element
2. Each overlay has its own wrapper with the class name 'cdk-global-overlay-wrapper' Therefore, changing the zIndex of the inner element has no effect, as it is already isolated from other overlays. The expected behavior is that the zIndex should be applied to the overlay wrapper instead.

The image below illustrates this issue:

• The red sections are the overlay wrappers

• The green section is the inner element of the overlay wrapper, which has its zIndex changed

The scenario is as follows: We have a modal component, which contains a button that opens a drawer component (the first red outline is the drawer wrapper, the second is the modal wrapper). As stated in the issue below, the drawer component should appear above the modal component; but currently, the modal component is on top. The reason why the zIndex property does not work is that it is applied to the inner element of the overlay, rather than the overlay wrapper.

This issue occurs whenever the CDK overlay is used; currently, only modal and drawer components have been fixed. If this pull request is approved, I will update other components that use the overlay as well.

Issue Number: #8353 , #8336

What is the new behavior?

Mentioned above.

Does this PR introduce a breaking change?

[ ] Yes
[✔] No

Other information

Currently it is not possible to set overlays' zIndex value when creating it (issue).

[zorro-bot[bot]]

This preview will be available after the AzureCI is passed.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (6024bcc) 91.74% compared to head (6b3072a) 91.76%. Report is 21 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8373      +/-   ##
==========================================
+ Coverage   91.74%   91.76%   +0.02%     
==========================================
  Files         520      520              
  Lines       18019    18031      +12     
  Branches     2838     2839       +1     
==========================================
+ Hits        16531    16546      +15     
+ Misses       1185     1183       -2     
+ Partials      303      302       -1     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[ParsaArvanehPA]

Please could you provide test for the code added ?

Sure, I will get back to you with that as soon as I can.

[ParsaArvanehPA]

Please could you provide test for the code added ?

Sorry for the delay; tests for the changes have been added. Thank you for reviewing my PRs @Nicoss54