Hello i am making a dialog with angularMaterial2 for typescript and i can generate the dialog, but this load at the end of the page not over the other elements like this is expected.

This is my .TS

import { Component, OnInit, Input } from '@angular/core';
import {Sponsor} from '../entitys/sponsor'
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
  selector: '[sponsor-tile]',
  templateUrl: './sponsor-tile.component.html',
  styleUrls: ['./sponsor-tile.component.css']
})

export class SponsorTileComponent implements OnInit {

  @Input() sponsor: Sponsor;

  constructor(public dialog: MdDialog) {}

  ngOnInit() {
    console.log(this.sponsor);
  }

  descModal(): void{
    let dialogRef = this.dialog.open(DialogSponsorTileComponent);
    dialogRef.afterClosed().subscribe(result => {
      console.log(result);
    });
  }

}

@Component({
  selector: 'dialog-sponsor-tile',
  templateUrl: './dialog-sponsor-tile.html'
})
export class DialogSponsorTileComponent{
  constructor(public dialogRef: MdDialogRef<DialogSponsorTileComponent>){}
}

and my HTML:

<img src="{{sponsor.Logoogo}}" class="speaker-img">
<h3>{{sponsor.Name}}</h3>
<p (click)="descModal()" >{{sponsor.Description}}</p>
<ul class="speaker-social">
  <li *ngIf="sponsor.Facebook !== null" ><a href="{{sponsor.Facebook}}"><span class="ti-facebook"></span></a></li>
  <li *ngIf="sponsor.Twitter !== null" ><a href="{{sponsor.Twitter}}"><span class="ti-twitter-alt"></span></a></li>
  <li *ngIf="sponsor.Linkedin !== null" ><a href="{{sponsor.Linkedin}}"><span class="ti-linkedin"></span></a></li>
</ul>

And the HTML of the Dialog:

<h1 md-dialog-title>Dialog</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions>
  <button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
  <button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
</div>

I made that in base at the examples of material.angular.io