Angular Material Select样式异常：下拉选项显示在页面底部

核心原因 #

Bootstrap 4.5.0 的全局样式（如定位规则、层级设置、元素默认样式）与 Angular Material 的 Overlay 容器（用于渲染下拉面板）样式发生冲突，导致 mat-select 的下拉面板无法正确定位到触发元素下方，而是被错误渲染到页面底部。

解决步骤 #

1. 调整样式导入顺序
   在 angular.json 的 styles 数组中，将 Bootstrap 的 CSS 文件放在 Angular Material 主题 CSS 之前，确保 Material 样式能覆盖冲突的 Bootstrap 规则：

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

2. 重置 CDK Overlay 容器样式
   在全局样式文件（如 styles.css）中添加以下 CSS，修复 Material 下拉面板的定位逻辑：

   .cdk-overlay-container {
     position: fixed !important;
     z-index: 1050 !important; /* 高于 Bootstrap 模态框的默认 z-index（1040） */
   }
   
   .cdk-overlay-pane {
     position: absolute !important;
     margin: 0;
   }
   

3. 排查全局样式干扰
   检查项目中是否有自定义全局样式修改了 body、html 的 position、overflow 属性，比如 body { position: relative; } 会破坏 Overlay 的固定定位逻辑，需要移除或调整这类规则。

4. 避免同类组件混用
   不要在同一页面同时使用 ng-bootstrap 的下拉组件（ngb-dropdown）和 Angular Material 的 mat-select，两者的定位逻辑和样式规则会互相干扰。

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