title: How can I position a dialog above the triggering button?
body: <p>I'm about to put a fist through my PC screen.  I have a dialog box that refuses to budge a hot inch above my submit button at the bottom of the screen -- I want it at the very top.</p>
  
  <p>I have made sure my theme is loading.  That was validated here: 
  <a href="https://i.stack.imgur.com/tg0w2.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/tg0w2.jpg" alt="ide loading of CSS"></a></p>
  
  <p>I have tried:</p>
  
  <pre><code>this.dialogBox.open(thankYouModal, {position: {top: '0%', left: '20%'}});
  </code></pre>
  
  <p>I've tried negative and positive numbers for top.  The best I get is that I can shift the modal further down so the user has to scroll down to close it.  However, that sucker won't budge a hair past the submit button</p>
  
  <p>I've attempted to put a style sheet into the component with the following:</p>
  
  <pre><code>div#cdk-overlay-0.cdk-overlay-container{
      position: fixed !important;
      left: 20%;
      top: 0%;
      background-color: white;
      pointer-events: auto;
  }
  </code></pre>
  
  <p>I cannot get this thing to budge an inch above that submit button.  I will give someone my first born child if they help me figure out what I'm doing wrong.</p>
  
  <p>(yes I know I'm dramatic, but I've fought with it and searched the web for 3 hours; I am a defeated man ... )</p>
  
  <p><strong>Edit</strong></p>
  
  <p>here is the thankYouModalComponent code:</p>
  
  <pre><code>import {Component} from "@angular/core";
  import {MdDialogRef, MdDialogConfig} from "@angular/material";
  
  @Component({
               selector: 'thank-you-modal',
               template: `
                                  &lt;h3&gt;Thank You for Your Submission&lt;/h3&gt;
                                  &lt;p&gt;Your Feedback has been Saved.&lt;/p&gt;
                                  &lt;button md-raised-button (click)="dialogRef.close()"&gt;Close&lt;/button&gt;
  
                          `,
              styles: [`
                          .md-dialog-container {
                                              position: fixed !important;
                                              left: 20%;
                                              top: 0%;
                                              background-color: white;
                                              z-index: 100000;
                      }`]
  })
  
  export class ThankYouComponent{
      constructor(public dialogRef: MdDialogRef&lt;any&gt;, ) {}
  }
  </code></pre>
  
  <p>Here's the calling method and constructor for the component:</p>
  
  <pre><code>constructor(@Inject(FormBuilder) fb : FormBuilder,
                   private feedbackService: feedbackService,
                   private dialog : MdDialog){
  
  -------&lt;irrelevant code here&gt;------------
  
  }
  
  
  
      submitFeedback(group : FormGroup){
              const feedback = new Feedback(  group.get('nameBox').value,
                                              group.get('productBox').value,
                                              group.get('upsBox').value,
                                              group.get('downsBox').value);
  
              if(confirm("Is the data entered what you want to submit?")){
                  this.dialog.open(ThankYouComponent, {position: {top: '0%', left:'20%'}});
  
      }
  </code></pre>
  
  <p>Resulting dialog at bottom of form</p>
  
  <p><a href="https://i.stack.imgur.com/5aL1D.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/5aL1D.jpg" alt="Resulting dialog box at the bottom of the form despite requesting is show at top"></a></p>