Angular CDK 未附加到原点

Question

我正在尝试创建一个简单的覆盖面板，当我点击一个按钮时它就会出现。该按钮位于屏幕的右上角，并设置为叠加层的原点。但是，叠加层出现在屏幕的左上角。我希望叠加层出现在按钮旁边。 我按下的按钮是导航栏最右侧的配置文件按钮，叠加层出现在左上角。

<div class="flex md:justify-between sm:justify-start">
<app-logo class="m-2 pt-2"></app-logo>
<app-search class="m-2 pt-2"></app-search>
<app-usermenu (click)="toggleMenu()" cdkOverlayOrigin #trigger="cdkOverlayOrigin" class="m-2 pt-2"
</app-usermenu>
</div>
<mat-divider></mat-divider>
<ng-template [cdkConnectedOverlay] [cdkOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="toggle">
<mat-card class="menu-card bg-slate-200">
<ul>Account</ul>
<ul>Logout</ul>
</mat-card>
</ng-template>