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.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[EliezerB123]

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

@am-awais If only it were that simple. That doesn't actually work, because Angular won't remove CSS that's been added to a page after the component that called it gets removed. So your 'popup' CSS is still there, and will get removed... never. The global CSS would be permanently overwritten once popup component has been opened even once.

[DzmVasileusky]

They have decided to just use BlockScrollStrategy to avoid this bug on the website.
But what if overlay pane is bigger and you need to scroll?
That's so unflexible, I kinda disappointed this problem exists, reported and not going to be fixed.

[Nikita1814]

This issue is still present

[DavidJournot]

I'm using several overlays on one page and I need to programmatically "bring to front" one of them at a specific time. Currently I don't have a solution, it would be nice to be able to control the z-index of individual overlays to chose which one is supposed to be at the top.

[ezzabuzaid]

We need this!

[ezzabuzaid]

Here is a workaround:

After opening the dialog pass the component instance, it has to have elementRef

setDialogInFront(ref.componentInstance);

Function that will set the dialog in front

export function setDialogInFront(elementHost: {
  elementRef: { nativeElement: HTMLElement };
}): void {
  const element = elementHost.elementRef.nativeElement;
  const mainOverlayWrapper = element.closest(
    '.cdk-global-overlay-wrapper'
  ) as HTMLElement;

  // the backdrop is the element before the main overlay wrapper
  // could be null if the dialog config contains hasBackdrop: false
  const mainOverlayBackDrop =
    mainOverlayWrapper.previousElementSibling as HTMLElement | null;

  // get the max z-index of the other dialogs
  let maxZIndex = 0;
  document
    .querySelectorAll('.cdk-global-overlay-wrapper')
    .forEach((wrapper) => {
      const zIndex = parseInt(
        window.getComputedStyle(wrapper).getPropertyValue('z-index'),
        10
      );
      maxZIndex = Math.max(maxZIndex, zIndex);
    });

  // set the z-index of the main dialog to be one higher than the max
  mainOverlayWrapper.style.zIndex = `${maxZIndex + 1}`;

  if (mainOverlayBackDrop) {
    mainOverlayBackDrop.style.zIndex = `${maxZIndex + 1}`;
  }
}

Example dialog component

export class MyDialogComponent {
  public elementRef: ElementRef<HTMLElement> = inject(ElementRef);
}

[yuanyuanlife]

Would you please provide with some api to control zindex of overlay?

[emondora]

Any solutions now? That’s big problem. Please provide some api to control zindex.

[ParsaArvanehPA]

When you create an overlay with this.overlay.create(config), you receive an OverlayRef object. This object has a private _host property that corresponds to the HTML element of the overlay. You can modify its style directly as follows:

(overlayRef['_host'] as HTMLElement).style.zIndex = `${zIndex}`;

You can set the zIndex property either programmatically or by selecting all the elements with the class name 'cdk-global-overlay-wrapper' and increasing their values as needed. For example:

const DEFAULT_ZINDEX = 1000;
const zIndex = DEFAULT_ZINDEX + document.querySelectorAll('.cdk-global-overlay-wrapper').length + 1;

[yuriy-bezrukov]

@use '@angular/cdk' as cdk;

cdk.$overlay-container-z-index: 1056;
cdk.$overlay-z-index: 1056;
cdk.$overlay-backdrop-z-index: 1056;

@include cdk.overlay();

[mminor-dev]

@use '@angular/cdk' as cdk;

cdk.$overlay-container-z-index: 1056; cdk.$overlay-z-index: 1056; cdk.$overlay-backdrop-z-index: 1056;

@include cdk.overlay();

This is the only thing I could get to work the way I needed.. however vscode does not like that syntax.
identifier expectedscss(css-identifierexpected) error on every variable being set 🤷‍♂️