Angular CDK Menu点击后在页面底部打开而非按钮下方的问题求助

你按以下步骤实现了CDK Menu，但点击触发按钮后菜单出现在页面底部，而非按钮正下方：

• 安装CDK：npm i @angular/cdk
• 在app.module.ts中导入CdkMenuModule并添加至imports数组
• 在app.component.html中编写菜单代码

问题原因 #

CDK Menu的定位依赖Angular CDK的OverlayModule模块，若未显式导入该模块，菜单会失去精准定位能力，回退到文档流的默认位置（如页面底部）；此外未指定菜单相对于触发按钮的附着位置，也可能导致定位不符合预期。

解决步骤 #

1. 导入Overlay模块
   在app.module.ts中补充导入OverlayModule，确保菜单定位逻辑正常运行：

import { CdkMenuModule, OverlayModule } from '@angular/cdk/menu';

@NgModule({
  imports: [
    // 其他已导入模块
    CdkMenuModule,
    OverlayModule
  ]
})
export class AppModule { }

2. 指定菜单附着位置
   在触发按钮上通过cdkMenuPosition属性，明确菜单相对于按钮的显示位置，例如设置为below让菜单显示在按钮正下方：

<button [cdkMenuTriggerFor]="menu" cdkMenuPosition="below">打开菜单</button>

<ng-template #menu>
  <div cdkMenu>
    <button cdkMenuItem>选项1</button>
    <button cdkMenuItem>选项2</button>
    <button cdkMenuItem>选项3</button>
  </div>
</ng-template>

3. 避免干扰菜单样式
   不要给菜单元素设置自定义的绝对定位、浮动等可能脱离文档流的样式，CDK会自动处理菜单的定位逻辑，自定义样式可能破坏默认行为。

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