Angular CDK OverlayModule, cdk-overlay-pane не устанавливает абсолютное положение?

Я использую Overlay Module из Angular's CDK. И я просто не могу найти способ добавить position: absolute к наложению? Модуль получит top и left позицию, которая соответствует положению подключенного элемента, но оверлей не получит position: absolute. Я не могу добавить абсолютную позицию из-за ViewEncapsulation. и я действительно изо всех сил пытаюсь найти решение.

Вопрос: Как использовать cdkOverlayOrigin и 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>

Посмотрите, как это не по центру

Если я добавлю position: absolute, теперь он работает как задумано?