如何将绝对定位的元素移动到应用程序的前层？ （Angular v.17）

Question

我猜布局层有问题。

我有一个 mat-dialog 组件，其中有一个带有选择的表单（定制的，不是 mat-select）。 选择的下拉菜单具有绝对位置，但仍然被 mat-dialog 剪切。

mat-tabs 也有相同类型的行为。

我尝试过使用溢出和z-index，但由于我实际上并不了解问题的根源，所以我不能真正盲目地修复它。

预期结果：

• 在与打开的下拉列表相关的垫对话框中没有滚动，但如果表单中有更多内容，则有机会展示自己；
• 下拉菜单根据其样式显示高度，溢出容器。

有人知道这个问题的后门吗？

Answer 1

当您创建 mat-dialog 时，您可以指定一个 panelClass。如果这个pannelClass是，例如

custom-pop-up

你可以添加styles.scss一些喜欢的

.custom-pop-up .mat-mdc-dialog-surface{
  overflow-y:visible;
}

这改变了溢出-y（缺陷是

auto

）

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  panelClass:'custom-pop-up', //<--this
  data: {....},
});

参见 stackblitz（当焦点显示一个大 div 时）

Answer 2

由于您想要在对话框内有一个滚动条，因此下拉列表应放置在 html 的根目录上，因此最简单的选择是。

更喜欢material select，第二选择是ng-select，但是在我看来material有更好的社区和更好的选择。