title: How to change absolute position of mat-menu in angular 4 material using x and y co-ordinates?
body: <p>I have following menu in angular 4</p>
  
  <pre><code>&lt;button mat-button [matMenuTriggerFor]="menu" style="display:none;"&gt;Menu&lt;/button&gt;
      &lt;mat-menu #menu="matMenu"&gt;
          &lt;button mat-menu-item *ngFor="let item of items" (click)="select(item)"&gt;
              {{ item }}
          &lt;/button&gt;
      &lt;/mat-menu&gt;
  </code></pre>
  
  <p>I am opening the menu when user selects text on screen using 
  <code>matMenuTrigger.openMenu();</code></p>
  
  <p>but I want to open menu wherever user selects text.
  I have X and Y coordinates of user selection but how can I change position of menu?</p>
  
  <p>I have tried giving Id to mat-menu and changing it's position using </p>
  
  <pre><code>element.style.position = 'absolute'
  element.style.left = screenX + 'px'
  element.style.top = screenY + 'px'
  </code></pre>
  
  <p>but it's not changing position of menu.</p>
  
  <p><strong>EDIT:</strong>
  I have changed position of menu by </p>
  
  <pre><code>this.matMenuTrigger.openMenu();
  var element = document.getElementsByClassName('cdk-overlay-pane');
  menu.style.position = "absolute";
  menu.style.left = evt.pageX + 5 + 'px';
  menu.style.top = evt.pageY + 5 + 'px';
  </code></pre>
  
  <p>where evt is mouseup event which gives co-ordinates(X,Y) of user text selection.</p>
  
  <p>But, when I scroll the page , opened menu again goes back to it's original position.
  How can I keep menu to it's changed position on scroll??</p>