NgBootstrap模态框异常显示在屏幕底部的问题求助

我在Angular项目里用NgBootstrap的NgbModal做了个用户模态框，结果遇到了很头疼的显示问题：模态框没有像预期那样居中覆盖父组件，反而跑到屏幕底部，还被父组件压在下面。

打开浏览器开发者工具查了下模态框的计算样式，发现它完全缺失了NgBootstrap原本应该自动添加的定位相关CSS规则——比如position: fixed|absolute、top、left，还有用来居中的transform: translate(-50%, -50%)。目前能看到的只有字体、边距（padding/margin）这类基础样式，半点儿定位相关的规则都找不到。

我猜要么是NgBootstrap自带的模态框CSS没加载成功，要么是被项目里其他CSS给覆盖或者清除了定位样式，实在摸不着头绪，来请教下大家。

目前的代码情况： #

父组件（UsersComponent）

模板代码：

<button class="add-user-btn" (click)="openNewUserModal(null)">Add User</button>

TypeScript代码：

import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
export class UsersComponent implements OnInit {
  constructor(
    private modalService: NgbModal
  ) { }

  openNewUserModal(user: User | null = null) {
    const modalRef = this.modalService.open(UserModalComponent);
  }
}

子组件（UserModalComponent）

模板代码：

<div class="modal-header">
  <h4 class="modal-title">User Modal</h4>
  <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
</div>
<div class="modal-body">
  Hello, minimal modal!
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary" (click)="activeModal.close('Save click')">Save</button>
</div>

TypeScript代码：

import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-user-modal',
  templateUrl: './user-modal.component.html',
  styleUrls: ['./user-modal.component.scss']
})
export class UserModalComponent implements OnInit {
  constructor(public activeModal: NgbActiveModal) { }
}

注：子组件目前没有自定义的CSS样式

我已经排查过的几个点： #

• 全局的styles.scss顶部已经导入了Angular Material的预构建主题：

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

• 在angular.json的build配置里，已经全局引入了Angular Material和Bootstrap的CSS文件：

  "styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ],
  

• 项目的index.html目前是这个样子，之前试过调整这里但会搞乱其他样式，现在已经恢复默认：

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TIMS</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- 谷歌字体相关引入链接 -->
  </head>
  <body class="mat-typography">
    <app-root></app-root>
  </body>
  </html>
  

有没有朋友遇到过类似的问题？或者能给我指几个排查的方向呀？

内容来源于stack exchange