Angular Material v15 mat-select选项显示在页面底部的修复方法

问题分析 #

你的mat-select下拉面板出现错位，主要原因是Angular Material的下拉面板默认挂载在<body>节点下，当父元素的定位样式（比如position: inherit）干扰了面板的位置计算，或者自定义CSS影响了默认布局逻辑时，就会出现选项跑到页面底部、被其他元素隔开的情况。

具体修复方案 #

1. 修正父元素定位样式

你的.select类设置了position: inherit，这会继承父元素的定位属性，干扰下拉面板的自动定位计算。直接移除该属性，恢复默认定位：

.select {
  margin-left: 3px;
  width: 20%;
  border: solid 1pt lightgray;
  padding: 5px;
  /* 移除 position: inherit，恢复默认的static定位 */
}

2. 自定义下拉面板位置与层级

通过panelClass给mat-select的下拉面板添加自定义样式，强制调整位置并确保层级在其他元素上方：

• 先在HTML中给mat-select添加panelClass属性：

<mat-select 
  appearance="fill" 
  [disableOptionCentering]="true" 
  class="select" 
  (selectionChange)="onChangeService($event)" 
  placeholder="Select Service"
  panelClass="custom-select-panel"
>
  <div *ngFor="let service of serviceNames">
    <mat-option value="{{service}}" class="option">{{service}}</mat-option>
  </div>
</mat-select>

• 再在CSS中添加自定义面板样式：

.custom-select-panel {
  /* 强制面板在触发元素下方显示，避免偏移至页面底部 */
  transform: translateY(0) !important;
  /* 确保面板层级高于右侧错误文本等元素 */
  z-index: 1000 !important;
}

3. 修复CSS拼写错误（可选但建议）

你的CSS中.opton:hover是拼写错误，修正为.option:hover才能让选项hover样式生效：

.option:hover {
  background-color: blue;
}

4. 额外排查点

如果以上方案仍未解决，检查页面中是否有其他全局样式（比如overflow: hidden、transform属性）影响了下拉面板的定位，尤其是mat-select所在的父级容器是否设置了这些属性，如有则需要调整。

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