MatDialog的左侧显示在侧边栏内，如何在侧边栏上显示Dialog

Question

我已经使用Angular Material实现了MatDialog。当我打开对话框时，对话框的左侧隐藏在侧边栏菜单中。

DashboardComponent中的代码

function lastSeenDevice(content) {
  
  const dialogRef = this.dialog.open(MyDialogComponent, {
    width: '80%',
    height:'80%',
    position: 'relative',
    data: { name: this.name, animal: this.city }
  });
}

MyDialogComponent中的代码

<div md-dialog-content>
     <button class="close" mat-button (click)="onNoClick()">
        <mat-icon>close</mat-icon>
    </button>
    
    <p>What's your favorite city?</p>
    <mat-form-field>
        <mat-label>Favorite City</mat-label>
        <input matInput [(ngModel)]="data.city">
    </mat-form-field>
</div>
<div mat-dialog-actions>
    <button id="matbuttonClose" mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

这是我的对话框的外观。我该如何解决？