title: Angular CDK's OverlayModule, cdk-overlay-pane will not set position to absolute?
body: <p>I'm using Overlay Module of Angular's CDK. And I just cannot find the way to add position: absolute to the overlay?  The module will receive a <code>top</code> and a <code>left</code> position that matches the connected element position but the overlay will not receive <code>position: absolute</code>.  I'm unable to add position absolute due to ViewEncapsulation.  and I'm really struggling to find a solution.</p>
  
  <p><strong>Question:</strong>
  How can I use <code>cdkOverlayOrigin</code> and <code>cdkConnectedOverlayOrigin</code></p>
  
  <p>Module:   </p>
  
  <pre class="lang-js prettyprint-override"><code>import { OverlayModule } from '@angular/cdk/overlay';
  
  
  
  @NgModule({
    imports: [
      OverlayModule,
    ],
    declarations: [ MenuComponent ],
  })
  export class MenuModule {
  }
  </code></pre>
  
  <p>Component:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-menu',
    templateUrl: './menu.component.html',
    styleUrls: [ './menu.component.scss' ],
  })
  export class MenuComponent {
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;div style="margin: 0 auto; width: 30%"&gt;
    &lt;h1 cdkOverlayOrigin
        #checkListTrigger="cdkOverlayOrigin"
        (click)="checkListOpen = !checkListOpen"
        style="background: blue"&gt;Overlay Origin&lt;/h1&gt;
    &lt;ng-template
      cdkConnectedOverlay
      [cdkConnectedOverlayOrigin]="checkListTrigger"
      [cdkConnectedOverlayOpen]="checkListOpen"&gt;
  
      &lt;ng-container&gt;
        &lt;p&gt;Why you no positioned on h1 element&lt;/p&gt;
      &lt;/ng-container&gt;
  
    &lt;/ng-template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>See how it's off center
  <a href="https://i.stack.imgur.com/dd3Fm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dd3Fm.png" alt="enter image description here"></a></p>
  
  <p>If I add position: absolute it now works as intended?
  <a href="https://i.stack.imgur.com/uDhGl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uDhGl.png" alt="enter image description here"></a></p>