Angular 5与Angular Material下拉菜单显示异常：偏离触发按钮至页面底部

嘿，我来帮你排查这个菜单错位的问题！结合Angular 5和Material的常见坑，菜单跑到页面底部通常是这几个原因：

• Overlay容器没配置对：Angular Material的菜单依赖CDK的Overlay模块，如果你的项目里没正确导入OverlayModule，或者全局overlay容器配置有问题，菜单就会被默认渲染到<body>的最底部。得确保app.module.ts里同时导入了MatMenuModule和OverlayModule哦。
• 父元素没设相对定位：菜单是相对于触发按钮来计算位置的，如果按钮的父元素（比如你代码里的#game-list-menu-left）没有设置position: relative，Material就找不到正确的参考点，只能退而求其次用页面视口来定位，结果就跑到底部去了。
• 菜单结构不完整：看你贴的代码片段没写完，得确认<mat-menu>标签和按钮的[matMenuTriggerFor]是正确绑定的，比如按钮里的sortMenu要对应<mat-menu #sortMenu="matMenu">这个模板引用变量，要是没配对，菜单渲染逻辑也会出问题。

快速修复步骤： #

1. 先检查模块导入，在app.module.ts里加上这两个模块：

import { MatMenuModule } from '@angular/material/menu';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [
    // ...其他你已经导入的模块
    MatMenuModule,
    OverlayModule
  ]
})
export class AppModule { }

2. 给按钮的父容器加相对定位的CSS：

#game-list-menu-left {
  position: relative;
}

3. 确认你的完整菜单结构是对的，比如：

<mat-card>
  <mat-card-header id="game-list-menu">
    <div id="game-list-menu-left">
      <button mat-button [matMenuTriggerFor]="sortMenu">Sort by: {{currentSort}}</button>
      <mat-menu #sortMenu="matMenu">
        <button mat-menu-item>按名称排序</button>
        <button mat-menu-item>按日期排序</button>
      </mat-menu>
    </div>
  </mat-card-header>
</mat-card>

要是还不行，打开浏览器的开发者工具，看看菜单元素的position和transform属性——正常情况下菜单应该是position: fixed，并且通过transform精准定位在按钮下方。如果这些样式被其他CSS覆盖了，那就要排查样式冲突的问题啦。

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