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 material 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!

Active

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!

Active

using important is not good practice, see discussion here: #3707319. – Clair

@Clair then why css is giving us that rule though ? – Active

it seems as though it should only be used if absolutely necessary. I'm working on a better work around at the moment and will post an answer when I find one. – Clair

ok i am waiting but any how idk why you give that ans negative... – Active

I minused your answer to your question because it didn't solve the issue and it's not good practice. I gave igsm a plus one because his answer solves the issue and his answer should be the accepted one. – Clair

This is not working for me. I am using angular 16 – Superadd

@Superadd Please use deep to target container like "::ng-deep .cdk-overlay-container" – Active

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"
}

Schroder

Ah good approach, ill try that in future and will let you know if need any help currently ill added above fix in my project and its working fine :) ... Anyhow Thanks for this effort. Cheers! – Active

Works fine, thx. Alternatively you could query the document for class .cdk-overlay-container. then you don't need a custom backdrop class: window.document.querySelector<any>('.cdk-overlay-container').style.zIndex = "1001" – Jackboot

Answer 3

You can solve the issue by using custom OverlayContainer class. You can find example with implementation here.

Beebeebe