堆叠Angular Material 2对话框，如toast

Question

我正在使用@angular/material库，并尝试创建一种类似bootstrap toast的效果。我希望在右上角可能出现多个对话框，并在最近的对话框下面叠加。

通过禁用背景幕和关闭功能，我有以下代码：

let dialogRef = this.dialog.open(NotificationInputComponent, {disableClose: true, hasBackdrop: false});
dialogRef.afterClosed().subscribe(result => {
  this.selectedOption = result;
});

哪个效果很好，所以当触发时，我会在屏幕中间显示：

如果我手动将元素css更改为position: absolute; right: 10px，那么它会转到屏幕的右侧并且看起来正确。问题是，现在如果我触发另一个对话，我必须再次执行相同操作，但设置top属性以阻止它覆盖现有对话框。我可能会跟踪组件中的所有触发对话框并手动更新上边距。但我想知道是否有一种更简洁的方法，或者让它们在css中堆叠，或者可能有办法将触发的对话框注入@angular/flexbox布局？