如何将mat-select的下拉面板定位在文本框正下方？

你当前使用Angular 15.1.3 + Angular Material 14.0.4，给mat-select添加panelClass后面板仍与输入框重叠，可通过以下两种方式实现面板置于输入框正下方的效果：

方法一：使用官方Overlay Position API（推荐） #

无需自定义CSS，直接通过overlayPosition输入属性配置面板位置，精准控制对齐方式与间距：

<mat-select 
  value="5" 
  [overlayPosition]="{
    originX: 'start',
    originY: 'bottom',
    overlayX: 'start',
    overlayY: 'top',
    offsetY: 10  /* 输入框与面板的间距，可按需调整 */
  }"
>
  <mat-option value="5">5</mat-option>
  <mat-option value="10">10</mat-option>
  <mat-option value="20">20</mat-option>
</mat-select>

参数说明：

• originX: 'start'：以输入框左侧为对齐基准
• originY: 'bottom'：以输入框底部为定位起点
• overlayX: 'start'：面板左侧与输入框左侧对齐
• overlayY: 'top'：面板顶部与输入框底部对齐
• offsetY: 10：设置额外间距，彻底避免重叠

方法二：自定义CSS修复 #

如果坚持使用panelClass，需解决Angular视图封装和Material默认样式优先级问题：

1. 组件内CSS（需穿透视图封装）：

::ng-deep .custom-panel {
  top: calc(100% + 10px) !important;
  left: 0 !important;
  transform: none !important; /* 覆盖Material默认的transform定位逻辑 */
}

2. 全局样式文件（如styles.css）：

.custom-panel {
  top: calc(100% + 10px) !important;
  left: 0 !important;
  transform: none !important;
}

3. 确保父容器为相对定位：
   给mat-select的父元素添加相对定位，让面板的top计算基于父容器：

<div style="position: relative;">
  <mat-select value="5" panelClass="custom-panel">
    <mat-option value="5">5</mat-option>
    <mat-option value="10">10</mat-option>
    <mat-option value="20">20</mat-option>
  </mat-select>
</div>

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