Angular CDK的OverlayModule，cdk-overlay-pane不会将位置设置为绝对？

我正在使用 Angular 的 CDK 的 Overlay 模块。我只是找不到将position:absolute添加到覆盖层的方法？该模块将收到一个top and a left与连接元素位置匹配的位置，但覆盖层不会接收到position: absolute。由于 ViewEncapsulation，我无法添加绝对位置。我真的很难找到解决方案。

问题：我该如何使用cdkOverlayOrigin and cdkConnectedOverlayOrigin

模块：

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



@NgModule({
  imports: [
    OverlayModule,
  ],
  declarations: [ MenuComponent ],
})
export class MenuModule {
}

成分：

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: [ './menu.component.scss' ],
})
export class MenuComponent {
}

模板：

 <div style="margin: 0 auto; width: 30%">
  <h1 cdkOverlayOrigin
      #checkListTrigger="cdkOverlayOrigin"
      (click)="checkListOpen = !checkListOpen"
      style="background: blue">Overlay Origin</h1>
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="checkListTrigger"
    [cdkConnectedOverlayOpen]="checkListOpen">

    <ng-container>
      <p>Why you no positioned on h1 element</p>
    </ng-container>

  </ng-template>
</div>

See how it's off center

If I add position: absolute it now works as intended?

生成的覆盖容器的绝对定位定义在.cdk-overlay-pane类，它是 Angular Material 主题的一部分。您可能忘记包含主题？

如果是这样，将以下行添加到您的 style.css 文件中（假设您使用 Angular CLI 项目）。@import "~@angular/material/prebuilt-themes/indigo-pink.css";