在Angular CDK Overlay中使用多个遮罩并将它们置于最前端，可以使用z-index属性来控制遮罩的层级。下面是一个示例代码：

1. 创建两个遮罩组件：mask1.component.ts和mask2.component.ts。

// mask1.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-mask1',
  template: '
',
  styleUrls: ['./mask1.component.css']
})
export class Mask1Component { }

// mask2.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-mask2',
  template: '
',
  styleUrls: ['./mask2.component.css']
})
export class Mask2Component { }

2. 在mask1.component.css和mask2.component.css中定义样式。

/* mask1.component.css */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* mask2.component.css */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

3. 在需要使用Overlay的组件中，使用Overlay和OverlayRef来创建和控制Overlay。

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { Mask1Component } from './mask1.component';
import { Mask2Component } from './mask2.component';

@Component({
  selector: 'app-overlay-example',
  template: `
    
      
Overlay Content
    
    Open Overlay
  `,
})
export class OverlayExampleComponent {
  @ViewChild('overlayTemplate') overlayTemplate: TemplateRef;
  private overlayRef: OverlayRef;

  constructor(private overlay: Overlay) { }

  openOverlay() {
    this.overlayRef = this.overlay.create({
      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
      hasBackdrop: true
    });

    const overlayPortal = new TemplatePortal(this.overlayTemplate, null);
    this.overlayRef.attach(overlayPortal);

    const mask1Portal = new TemplatePortal(new Mask1Component().templateRef, null);
    const mask2Portal = new TemplatePortal(new Mask2Component().templateRef, null);
    this.overlayRef.attach(mask1Portal);
    this.overlayRef.attach(mask2Portal);
  }

  closeOverlay() {
    this.overlayRef.dispose();
  }
}

4. 在需要使用Overlay的模块中，将Overlay和遮罩组件添加到entryComponents和declarations中。

@NgModule({
  declarations: [
    OverlayExampleComponent,
    Mask1Component,
    Mask2Component
  ],
  imports: [
    OverlayModule
  ],
  entryComponents: [
    Mask1Component,
    Mask2Component
  ],
})
export class OverlayExampleModule { }

在上面的示例中，我们使用Overlay和OverlayRef来创建并控制Overlay。在openOverlay()方法中，我们创建了一个Overlay，并使用TemplatePortal将Overlay内容添加到Overlay中。然后，我们使用TemplatePortal将两个遮罩组件添加到Overlay中，并通过设置它们的z-index来控制它们的层级。最后，我们使用attach()方法将Overlay和遮罩组件附加到OverlayRef上。