Material Dialog Positioning

First pass in your 'MessageComponent' on Open

     // data you want to show is contained in the matDialogConfig
     let mc = this.getConfig(data);
     // Tell Matdialog which Angular component to use.
     let mdRef = this.md.open(MessageComponent, mc);

Grab the data out of MessageComponent

    import { MAT_DIALOG_DATA } from "@angular/material/dialog";
    import { Component, OnInit, AfterViewInit, Inject } from "@angular/core";
    import { inject } from "@angular/core/testing";

    @Component({
      selector: "lib-message",
      templateUrl: "./message.component.html",
      styleUrls: ["./message.component.css"],
    })
    export class MessageComponent implements OnInit, AfterViewInit {
      constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
        // get the injected dialog data
        this.data = data;
      }

      ngOnInit(): void {}
      ngAfterViewInit() {}
    }

In HTML, this is only markup needed.

    {{data}}

The CSS in the MessageComponent allows full control on position.

    :host {
        display: grid;
        justify-content: center;
        align-items: center;
        background-color: yellow;
        position: absolute;
        top: 10em;
        left: 20em;
        height: 10em;
        width: 20em;
        box-shadow: 0 0 5px rgb(0, 0, 0, 0.27);
    }

Your message component takes precedence over the CDK Overlay! Very nice.