mat-选项显示在页面底部，而不是出现在mat-select下

是因为mat-select组件的默认行为是将选项显示在下拉框中，但可以通过一些自定义样式和属性来改变这种行为。

要将mat-选项显示在页面底部，可以使用以下步骤：

1. 使用Angular Material库中的mat-select组件创建一个下拉框。
2. 在mat-select标签中添加panelClass属性，并设置一个自定义的CSS类名，例如"bottom-panel"。
3. 在全局的样式文件（例如styles.css）中定义.bottom-panel类，并设置其position属性为fixed，并将其bottom属性设置为0，以将下拉框显示在页面底部。

示例代码如下：

在HTML模板中：

<mat-select panelClass="bottom-panel">
  <mat-option value="option1">Option 1</mat-option>
  <mat-option value="option2">Option 2</mat-option>
  <mat-option value="option3">Option 3</mat-option>
</mat-select>

在全局样式文件（styles.css）中：

.bottom-panel .mat-select-panel {
  position: fixed;
  bottom: 0;
}

这样，mat-选项就会显示在页面底部，而不是出现在mat-select下方。

关于mat-select组件的更多信息和使用方法，可以参考腾讯云的Angular Material文档：Angular Material - mat-select