Méthode : HTMLElement.getBoundingClientRect()

<style type="text/css">
 div#myDiv {
   background-color:#faa;
   padding:5px;
   margin:5px;
   border:3px solid #999
 }
 div.calque {
   position:absolute;
   opacity:0.6;
   padding:0px;
   margin:0px;
   background-color:#fff;
   text-align:center;
   animation:anim 0.3s infinite;
 }
 @keyframes anim {
   0%   { opacity: 0; }
   100% { opacity: 0.6; }
 }
</style>

<div id="myDiv">MON DIV</div>

<script>
 function showCalque() {
   var div=document.getElementById("myDiv");
   var pos=div.getBoundingClientRect();
   console.log(pos);

   /* Création d'un calque transparent au dessus de myDiv */
   var calque=document.createElement("div");
   calque.innerHTML=Math.round(pos.width)+"x"+Math.round(pos.height);
   calque.setAttribute("class", "calque");
   calque.style.top=Math.round(pos.top)+"px";
   calque.style.left=Math.round(pos.left)+"px";
   calque.style.width=Math.round(pos.width)+"px";
   calque.style.height=Math.round(pos.height)+"px";
   document.body.appendChild(calque);
 }

 document.addEventListener("DOMContentLoaded", showCalque);
</script>