overlay-demo.html

<div cdkOverlayOrigin
     #origin="cdkOverlayOrigin"
     #trigger>
    <button mat-button (click)="openOverlay()">
        Open
    </button>
</div>

<ng-template
    cdkConnectedOverlay
    hasBackdrop
    backdropClass="cdk-overlay-transparent-backdrop"
    [cdkConnectedOverlayOrigin]="searchFieldOrigin"
    [cdkConnectedOverlayOpen]="showOverlay"
    [cdkConnectedOverlayPositions]="positions"
    [cdkConnectedOverlayMinWidth]="triggerWidth"
    [cdkConnectedOverlayHeight]="triggerHeight"
    (backdropClick)="closeSearchField()">
    <div class="overlay-content">
        Content goes here
    </div>
</ng-template>

overlay-demo.ts

import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import {ConnectionPositionPair} from '@angular/cdk/overlay';

@Component({
    selector: 'overlay-demo',
    templateUrl: './overlay-demo.html'
})
export class OverlayDemoComponent implements OnInit {
    @ViewChild('trigger') trigger: ElementRef;

    public showOverlay: boolean = false;

    private _triggerWidth: number;
    private _triggerHeight: number;

    private _positions: ConnectionPositionPair[] = [
        {
            originX: 'start',
            originY: 'top',
            overlayX: 'start',
            overlayY: 'top',
            offsetX: 0,
            offsetY: 0
        }
    ];

    ngOnInit() {
        this._refreshTriggerDimensions();
    }

    public closeOverlay() {
        this.showOverlay = false;
    }

    public openOverlay() {
        this._refreshTriggerDimensions();
        this.showOverlay = true;
    }

    private _refreshTriggerDimensions() {
        let clientRect = this.trigger.nativeElement.getBoundingClientRect();
        this._triggerWidth = clientRect.width;
        this._triggerHeight = clientRect.height;
    }

    get positions(): ConnectionPositionPair[] {
        return this._positions;
    }

    get triggerHeight(): number {
        return this._triggerHeight;
    }

    get triggerWidth(): number {
        return this._triggerWidth;
    }
}

Overlay Demo for connected overlay creation.