title: Angular 2 How to Position an Element Relative to Another Element
body: <p>In Angular 2, I need to absolute position an element relative to another element. In jQuery this can be done using jQueryUI .position() <a href="https://api.jqueryui.com/1.8/position/" rel="nofollow noreferrer">https://api.jqueryui.com/1.8/position/</a></p>
  <p>I've attempted to create an Angular 2 directive but can't find a way to reference the target element (which could be anywhere on the page) to get top/left/width/height values.</p>
  <p>Also, my understanding is that DOM manipulation should be avoided in Angular 2. Can this position functionality be achieved without using nativeElement?</p>
  <p>The goal is to be able to create an overlay on top of any page where help/hint text can positioned on top of elements. Note that the page is responsive. This is an example of the desired effect.</p>
  <p><a href="https://i.stack.imgur.com/bha9N.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bha9N.jpg" alt="help overlay" /></a></p>