Angular15+Bootstrap5中Modal内mat-autocomplete的z-index失效求助

问题原因 #

核心是层级冲突：Bootstrap 5 模态框默认z-index为1055，而Angular CDK生成的autocomplete下拉面板（挂载在<body>下的.cdk-overlay-pane）默认z-index仅为1000，因此被模态框遮挡。

你之前修改无效的原因：

• 样式写在组件私有CSS中，Angular视图封装机制会给样式添加作用域前缀，无法影响<body>下的全局overlay元素；
• 未精准定位到下拉面板的直接容器.cdk-overlay-pane，而是修改了外层无关容器类。

解决方案 #

方案一：全局样式设置更高层级 #

在项目全局样式文件（如styles.scss/styles.css）中添加：

.cdk-overlay-pane {
  z-index: 1060 !important;
}

数值只需比Bootstrap模态框的1055高即可，无需设置过大值。

方案二：自定义overlay类（精准控制） #

不想全局修改所有overlay层级的话，给目标mat-autocomplete指定自定义面板类：

1. 修改HTML中的mat-autocomplete标签：

<mat-autocomplete #plantAutoComplete="matAutocomplete" 
                  name="plants" 
                  [displayWith]="displayFn"
                  [overlayPanelClass]="'modal-autocomplete-overlay'"
                  (optionSelected)="selectionChanged($event.option.value)">

2. 在全局样式文件中添加：

.modal-autocomplete-overlay {
  z-index: 1060 !important;
}

方案三：排查overflow裁剪问题 #

若以上方法无效，检查模态框的.modal-body是否设置了overflow: hidden，该属性会裁剪超出容器的内容，即使层级足够也会被挡住。可修改为：

.modal-body {
  overflow: visible !important;
}

若需要滚动，可保留overflow-y: auto，确保overflow-x为visible。

内容的提问来源于stack exchange，提问作者snuz