Angular Material cdk-container and main site fixed header z-index override

Question

I have site with fixed header in angular material with z-index of 1100 .

While i have some mat-menu in my site which overlap the header with z-index:1200 and had class cdk-overlay-container (angular materiel class) which is default behavior.

To override this i just decrease the cdk-overlay-container z-index to 1000 so that it go behind the fixed header and all things ok to me.

Problem

But when i open my material dialog which uses same cdk-overlay-container and same z-index it shows my fixed header above that overlay because of its high z-index , So any idea how to achieve the above scenario by adding different class to cdk-overlay-container so that my mat-menu goes behind the fixed header but my mat-dialog above all content.

Screen shoots

Normal scenario https://www.screencast.com/t/XhB2szH3gZe

Problem scenario https://www.screencast.com/t/fYrMYFEOd

I have one solution by type-script(that when dialog show lower the z-index of header) but i need some pure CSS solution.

Thanks!

Answer 1

I figured it out my self

Just override the z-index of cdk-overlay-container

In your style.scss

.cdk-overlay-container{
  z-index:999; //lower then fixed header z-index so it goes behind it
}

and in your component dialog.scss

.cdk-overlay-container{
   z-index:2000 !important; //higher then fixed header z-index so it comes above
}

Cheers!

Answer 2

I had similar issue with the full-screen CDK overlay container and the material dialog that should come above anything. The issue is, that if you use provided material elements like Dialog, Tooltip, Menu, they all work with overlay CDK. Then, on top, you may have your custom Overlay service that utilizes CDK. In my case, two cdk-container-overlay divs were created. z-index is 1000 by default and the latest instance overlap's when both overlays are required at the same time.

Some will yell that it is not Angular way, but in my case, I ended up adding a backdropClass to the config of the material dialog. Then, I simply select dialog backdrop's parentNode and manually add z-index on demand.

public openFeedbackDialog(): void {
    this.dialog.open(FeedbackFormComponent, {
        width: '450px',
        maxHeight: '450px',
        minHeight: '200px',
        backdropClass: 'feedbackBackdrop',
        hasBackdrop: true
    })
    window.document.querySelector<any>('.feedbackBackdrop').parentNode.style.zIndex = "1001"
}

Answer 3

This might help https://www.bbogdanov.dev/post/angular-material-overlay-hack-overlay-container . Besides this you can also you block strategy to prevent scrolling.