如何让元素固定在可滚动mat-select列表顶部？

我来帮你搞定这个头疼的问题！你遇到的核心问题是把搜索框放在了mat-select的下拉面板内部，而mat-select的下拉列表是独立滚动的容器，所以滚动时自然会带着搜索框一起跑。之前用position:absolute没生效，大概率是因为没找对正确的定位父级——毕竟mat-select的下拉面板是Angular Material动态生成的，和你写的.combo容器不在同一个定位上下文里。

咱们直接调整DOM结构和样式就能解决，步骤如下：

1. 调整HTML结构：把搜索框移到mat-select外部 #

把搜索框从<mat-select>里拿出来，放在<mat-form-field>内部、<mat-select>的上方，这样它就属于表单域的固定部分，不会跟着下拉列表滚动了。修改后的代码：

<div class="combo">
  <div>
    <mat-form-field appearance="outline" class="calendarfilter">
      <mat-label>Categoria Evento</mat-label>
      <!-- 把搜索框移到mat-select外面，和它同级 -->
      <input class="filter" placeholder="Trova..." matInput (keyup)="onKey($event.target.value)">
      <mat-select (selectionChange)="filteredEvento.emit($event.value)" [ngModel]="tipieventi[0].id">
        <mat-option *ngFor="let tipoevento of selectedTE" [value]="tipoevento.id">
          {{tipoevento.descrizione}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

2. 优化CSS样式，让布局更协调 #

调整搜索框的样式，让它和mat-select的输入区域对齐，看起来像是一体的：

.calendarfilter {
  width: 300px;
  /* 给表单域加一点内边距，让搜索框和下拉框之间有间距 */
  padding-top: 8px;
}

.combo {
  height: auto; /* 原来的70px高度可能会限制搜索框显示，改成auto */
}

.filter {
  width: 100%; /* 改成100%继承父容器宽度，更灵活 */
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  padding: 0 16px;
  height: 40px;
  box-sizing: border-box;
}

为什么之前的方法没用？ #

• disableOptionCentering：这个属性只是控制当选中某个选项时，下拉列表是否自动把该选项居中显示，和搜索框的滚动问题完全不相关，所以自然没效果。
• position:absolute：mat-select的下拉面板是在页面的全局层级动态生成的（默认附加到body），它的定位父级不是你写的.combo或.calendarfilter，所以你设置的absolute不会让它脱离下拉面板的滚动范围。

这样调整后，搜索框就会固定在mat-select的上方，不管下拉列表怎么滚动都不会消失，过滤逻辑也完全不受影响，完美解决你的问题！

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