title: How to get absolute coordinates of element with absolute position (JavaScript, Browser)
body: <p>I have some problems with getting coordinates of an element's center which is child of other element with absolute position too.
  <a href="https://i.stack.imgur.com/C0or7.png" rel="noreferrer">Here you can see a screenshot with the order of elements.</a></p>
  
  <p>To understand the problem better you can visit my <a href="https://github.com/levabala/GraphsZone5.0" rel="noreferrer">repository at GitHub.</a> index.html is in folder "/Resources"</p>
  
  <p>So, I have some draggable windows (with interact.js) in some other draggable windows and I want to connect their centers by the lines-divs (they are drawn using div with some transformations).</p>
  
  <p>I use <a href="https://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs">this method</a> to render the lines (maybe there are some problems here). I have tried to use jsPlumb for lines drawing, but I failed :(</p>
  
  <p>There is getting points x and y.</p>
  
  <pre><code>// bottom right        
  var x1 = offset1.left - margin1.left + size1.width/2 - (this.dom.getAttribute('data-x') || 0);
  var y1 = offset1.top - margin1.top + size1.height/2 - (this.dom.getAttribute('data-y') || 0);
  // top right
  var x2 = offset2.left - margin2.left + size2.width/2 - (this.dom.getAttribute('data-x') || 0);
  var y2 = offset2.top - margin2.top + size2.height/2 - (this.dom.getAttribute('data-y') || 0);
  </code></pre>
  
  <p>(this.dom.getAttribute('data-x') || 0) - that's for Interact.js.</p>
  
  <pre><code>function getMargins(elem) {
      var top = 0, left = 0;
      while (elem.parentNode) {
          top = top + parseFloat(window.getComputedStyle(elem).marginTop.replace('px', ''));
          left = left + parseFloat(window.getComputedStyle(elem).marginLeft.replace('px', ''));
          elem = elem.parentNode;
      }
  
      return { top: Math.round(top), left: Math.round(left) }
  }
  
  function getOffsetRect(elem) {
      // (1)
      var box = elem.getBoundingClientRect()
  
      // (2)
      var body = document.body
      var docElem = document.documentElement
  
      // (3)
      var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
      var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
  
      // (4)
      var clientTop = docElem.clientTop || body.clientTop || 0
      var clientLeft = docElem.clientLeft || body.clientLeft || 0
  
      // (5)
      var top = box.top + scrollTop - clientTop
      var left = box.left + scrollLeft - clientLeft
  
      return { top: Math.round(top), left: Math.round(left) }
  }
  </code></pre>
  
  <p>Can you help me with the getting center coordinates? Thanks in advance</p>