JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
    <p>text a</p>
            <div style="padding-left:200px;padding-top:500px">
                    <table class="message">
                            <tr><td>test <span id="test" onclick="testPos(this);">hello</span> world</td></tr>
                    </table>
            </div>
        <div id="overlay"></div>
    </body>
    </html>

CSS

#overlay {
    background:red;
    display:none;
    position:absolute;
    left:20px;
    top:20px;
    width:50px;
    height:50px;
    
}

JavaScript

function testPos(elem) {
  var pos = getPos(elem);
  console.log(pos);
  // 50 is just the height of the test overlay
  document.getElementById('overlay').style.top = (pos.top-50) + 'px';
  document.getElementById('overlay').style.left = pos.left + 'px';
  document.getElementById('overlay').style.display = 'block';
}

function getPos(elem) {
    var docElem, win,
		box = { top: 0, left: 0 },
		doc = elem && elem.ownerDocument;
	if ( !doc ) {
		return;
	}
	docElem = doc.documentElement;
    if ( typeof elem.getBoundingClientRect !== typeof undefined ) {
		box = elem.getBoundingClientRect();
	}
    win = self;
    return {
		top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
		left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
	};
}