Dialog: backdrop does not overlap navbar

Bug, feature request, or proposal:

I have an angular 6 application with basically a navbar on top and a content section below. The navbar links trigger different components which are then rendered in the router-outlet of the content-section. When i open a dialog from a component (no matter whether inside the navbar or inside the router-outlet), the dialog does not overlap the navbar (Bootstrap class) on top of the page. I have prepared a StackBlitz (see below) which reproduces this behaviour.

What is the expected behavior?

The Dialog (the backdrop) should overlap the navbar, so that users cannot press links/buttons inside the navbar.

What is the current behavior?

The backdrop overlaps all components, but not the navbar, which appears to be “on top” and therefore is still accessible by the user.

What are the steps to reproduce?

StackBlitz editor: open App in new window (necessary for the navbar to be displayed correctly, as this app does not support small devices): open

You can find the navbar and the router-outlet I mentioned above in the MainComponent.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I use angular v6.0.4 and material v6.2.1. Affected browsers: FF, IE11, Opera v51, Chrome (these are at least the ones I tested).

Is there anything else we should know?

I managed to fix this behaviour for the moment by adding the following class to my global styles.css: .cdk-overlay-container { z-index: 9999; }

[ngi32487]

Finally I found the problem, maybe this explanation helps others: The bootstrap class .navbar-fixed-top has z-index: 1030 (refer to bootstrap.css), therefore the .cdk-overlay-container (the parent element for the dialog-backdrop) needs to have a higher z-index in order to overlap.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}