如何使“角度材质对话框”组件位于其他组件之上

Question

我的应用程序设置为使用屏幕左侧的垂直导航栏，并使用其右侧<router-outlet>中的Home组件。 当我在Home Component中打开一个Dialog Component时，它的一部分会被Dialog Component顶部的导航栏隐藏。我想保持对话框组件相对于整个屏幕的位置，而不仅是<router-outlet>中的主页组件。 导航栏确实具有CSS：

.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

Answer 1

我的建议是将对话框组件移出路由器插座，并使用服务打开和关闭它。这样一来，它就始终排在最前面。

如果您不想这样做，则需要在顶部弹出的对话框中使用position:absolute。

Answer 2

在style.css上应用预建主题解决了问题：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";