ability to manually control overlay's z-index

[fxck]

This would be handy for both user created overlays, as well as those used by angular components such as md-menu.

Take this for example http://plnkr.co/edit/AqjYdsScCYPlK9w44aHQ?p=preview you have a fixed element(some sort custom toolbar), inside it you have a button which triggers md-menu, it works fine, but the md-menu-click-catcher, which is for some reason inside the actual md-menu element, is actually stacked above md-overlay-container, causing any attempt to click on the menu items to close the menu(which can be extremely confusing).

1. md-overlay-container should not have z-index at all, as it renders z-indexes of md-overlay-pane useless
2. you should be able to manually control z-index of md-overlay-pane

I imagine(at least for the user invoked overlay), it could work either by being able to give the overlay my own identificator(class at least), or being able to set it via OverlayState settings.. the former is preferable, as you can then easily switch z-indexes with media queries.

[meowhunter]

Here is a good example why cdk-overlay-container should not have z-index

[am-awais]

Any updates?? That's really annoying

[am-awais]

I sort it out myself by using two stylessheet one Global and other component's stylesheet, In global i set z-index to to lower value(1000) so that it goes behind the header and in popup component styles sheet i set that to high value(2000) with !important so that header goes behind my overlay. That's how i manage to solve it
Thank me later

[aksenovdev]

Maybe it help
https://blog.bbogdanov.net/post/angular-material-overlay-hack-overlay-container/

[4javier]

Any news? There are some situations where somebody want his overlay to overlap even a fixed header. Think about tooltips.
Inside OverlayConfig we already have BackdropClass and PanelClass. Why not ContainerClass too?

[Harpush]

I am pretty sure the correct approach is something like bringToFront method... That way we can do it only when needed and not absolutely. For example when we open a select it will bring itself to front.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[EliezerB123]

Maybe it help https://blog.bbogdanov.net/post/angular-material-overlay-hack-overlay-container/

I'm horrified, but this might actually work. Thank you, @aksenovdev .

This would be SO much better if we could actually just do this normally, though. I guess that depends on whether the community votes on it.

Currently, if I have a fixed header, there's no way for me to specify that

Menus will go above the header,
but
Selects will go below the header,
because there's no way to have two different z-indexes.