Div not getting exact position onhover

I have a div and I want it to be shown at the exact same position as the hovered element inside the iframe. It gets the height and width correct tho, but not the top and left. What am I doing wrong? How to make it get the correct element position?

Here's the code:

<html>
  <body>
    <div>
      <div id="box"></div>
      <p id="a">You clicked on:</p>
      <iframe
        id="zzz"
        srcdoc="<html><h1>hello</h1><button> click </button></html>"
        width="500"
        height="500"
      ></iframe>
    </div>

    <script>
      let elem = "";
      let myiframe = document.getElementById("zzz").contentWindow;
      let div = document.getElementById("box");

      myiframe.addEventListener("mouseover", function (e) {
        elem = e.target;
        var rect = elem.getBoundingClientRect();
        x = rect.left;
        y = rect.top;
        w = rect.width;
        h = rect.height;
        document.getElementById("a").innerHTML =
          elem.tagName + " width: " + w + " height: " + h;

        div.style.display = "block";
        div.style.position = "absolute";
        div.style.width = w;
        div.style.height = h;
        div.style.left = x;
        div.style.top = y;
      });

    </script>
    <style>
      #box {
        border: blue 1px solid;
        height: 25px;
        width: 50px;
        display: none;
      }
    </style>
  </body>
</html>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW