title: How can I position an Angular Material panel dialog relative to a button?
body: <p>According to a <a href="https://github.com/angular/material/issues/4037#issuecomment-235619248">discussion at Github</a> one cannot position a <a href="https://material.angularjs.org/latest/demo/dialog">standard dialog</a> (<a href="https://material.angularjs.org/latest/api/service/$mdDialog">api</a>), but <a href="https://material.angularjs.org/latest/demo/panel">panel dialogs</a> (<a href="https://material.angularjs.org/latest/api/service/$mdPanel">api</a>) can be positioned. </p>
  
  <p>A <a href="http://codepen.io/anon/pen/rLPbLr?editors=0010">simplified demo</a> shows that this is true:</p>
  
  <pre><code>var position = this._mdPanel.newPanelPosition().bottom(0).right(0);
  </code></pre>
  
  <p>The <a href="https://material.angularjs.org/latest/api/type/MdPanelPosition">Angular Material docs</a> show a method that allows positioning relative to the clicked element (or whatever is passed in). I'm unable to get this to work, however. </p>
  
  <pre><code>var target = el.target;
  var position = this._mdPanel.newPanelPosition().relativeTo(target); 
  </code></pre>
  
  <p>Passing in hard values for <code>.top()</code> and <code>.right()</code>, for example, allows positioning relative to the viewport. I can't get positioning relative to the clicked element, though. How is this supposed to work?</p>