overlay issue in material template

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[x] Support request

Current behavior

I am having an overlay issue over here, i think picture speak faster and clearer

as you can see, the side bar and top navigation bar overlapping the backdrop and image, the close button even hiding behind the top nav bar

Expected behavior

This result is exactly what I expected.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment (the most important section to fill very carefully)

- Node version: X.X.X  
- npm version: X.X.X  
- Operating System and version:  
- Angular version: X.Y.Z 
- angular-cli version (or SystemJS/Webpack): X.Y.Z 
- I'm using Server Side Rendering with angular-universal: YES/NO
- I'm compiling with mode: DEBUG / PROD / PROD with AOT



Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Others:

[gagandeepbal]

Setting the z-index on sidenav content (where router-outlet is) fixed the issue. Also, i’m switching mode of sidenav based on screen size using flex-layout, so i have to use ngStyle for setting z-index when sidenav mode is set to side.

NOTE: I’m using material sidenav in my app.

@Ks89 Thanks for your awesome work.

[Ks89]

Fully implemented (branch 800) with angular/cdk and scheduled for 8.0.0-beta.1 that is coming soon.

I close this issue because already done and It will be available in a beta release in some days.