title: Angular CDK Overlay configure overlay position
body: <p>I am using the Angular CDK to show an element with overlay. My problem is that I want to change the position to be in the top right, but none of the arguments to the <code>connectedTo</code> function is doing this.</p>
  
  <pre><code>@Component({
    template: `
      &lt;button cdk-overlay-origin (click)="openSpaghettiPanel()"&gt;
        Pasta 3
      &lt;/button&gt;
     `
  })
  export class AppComponent  {
    @ViewChild(OverlayOrigin) _overlayOrigin: OverlayOrigin;
    constructor(private _overlay: Overlay, 
                public viewContainerRef: ViewContainerRef) {
  
    }
  
    openSpaghettiPanel() {
      let strategy = this._overlay.position()
          .connectedTo(
              this._overlayOrigin.elementRef,
     {originX: 'start', originY: 'bottom'},
              {overlayX: 'end', overlayY: 'top'} );
      let config = new OverlayConfig({ width: '100px', height: '100px', positionStrategy: strategy});
      const overlayRef = this._overlay.create(config);
      const userProfilePortal = new ComponentPortal(HelloComponent, this.viewContainerRef);
      overlayRef.attach(userProfilePortal);
    }
  }
  </code></pre>
  
  <p>Which values I need to set in the <code>connectedTo</code> function for this to work? </p>