get element position relative to an other

getRelativeBoundingClientRect.js

// keep in mind element may be inside an iframe
// var childWindow = elem.document.frames.window;
// while (childWindow != parentWindow) {
//   offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
//   offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
//   childWindow = childWindow.parent;
// }

const getRelativeBoundingClientRect = (element, relativeElement) => {
  const { left, top, right, bottom } = element.getBoundingClientRect()
  const {
    left: relativeLeft,
    top: relativeTop,
    right: relativeRight,
    bottom: relativeBottom
  } = relativeElement.getBoundingClientRect()

  return {
    left   : left - relativeLeft,
    top    : top - relativeTop,
    right  : relativeRight - right,
    bottom : relativeBottom - bottom,
  }
}

const getOffsetParentPosition = (element) => {
  return getRelativeBoundingClientRect(element, element.offsetParent)
}