Question

我一直在研究包含多个布局即侧边栏和主布局的角度应用程序。我想将对话框放置在主布局中，但它显示在总布局的顶部。如何仅在主布局的中间显示它。

Answer 1

模态（或对话框）覆盖整个视图的原因是因为.modal类使用position:fixed，其{{margin：auto}的边距与两侧的边距相似，并且具有固定的{{ 1}}。

您没有共享代码，因此我创建了一个侧边栏，该边栏占据了屏幕宽度的20％；这意味着剩下的80％将是我们的“主要布局”。现在，为了确保模态严格在“主布局”的范围内，我们添加了20％的左边距（这正是我们分配给侧边栏的宽度）；

相关的 HTML ：

  .sideBar{width:20vw; background:lightblue; height:100vh;}
  .mainArea{ width:80vw; height:100vh;}
  ::ng-deep .modal{margin-left:20vw;}