fix: change positioning method by moving coach mark to body tag

demo/index.html

@@ -100,7 +100,7 @@ <h2>Eleventh Example</h2>
         </div>
     </div>
 
-    <div style="width:250px; overflow: scroll">
+    <div style="width:250px; overflow: scroll; position: relative;">
         <h2>Twelveth Example</h2>
         <div id="demo-target12" class="demo-target" style="width:350px;">
             This Coachmark pops out of a hidden content scrolling container

index.js

@@ -19,7 +19,10 @@ export default class CoachMark {
     if (coachEl.length === 0) {
       this.container = document.createElement('div');
       this.container.setAttribute('data-id', config.elementId);
-      target.parentNode.insertBefore(this.container, target.nextSibling);
+      // Fix for positioning in a container that position:relative and overflow:scroll or overflow:hidden
+      // move the node to the body tag instead of inside the parent container.
+      //target.parentNode.insertBefore(this.container, target.nextSibling);
+      document.body.appendChild(this.container)
 
       // check to see if any coaches are open, if they are, remove.
       _.forEach(coachAll, coach => {

src/js/component-owner.js

@@ -115,15 +115,16 @@ class ComponentOwner extends Component {
     const { target } = this.props;
 
     // this is called on draw and redraw
-    const elementPosition = {
-        top: target.offsetTop,
-        left: target.offsetLeft,
-        bottom: target.offsetTop + target.offsetHeight,
-        right: target.offsetLeft + target.offsetWidth
-      },
-      horizontal_center =
-        (elementPosition.right - elementPosition.left) / 2 +
-        elementPosition.left;
+    const targetRect = target.getBoundingClientRect(),
+          elementPosition = {
+            top: targetRect.top + window.scrollY,
+            left: targetRect.left + window.scrollX,
+            bottom: targetRect.bottom + window.scrollY,
+            right: targetRect.right + window.scrollX
+          },
+          horizontal_center =
+            (elementPosition.right - elementPosition.left) / 2 +
+            elementPosition.left;
 
     const centerOnDiv = () => {
       // if forced right push right