JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr><td>test</td><td>test</td></tr>
    <tr><td>test</td><td>
        <div id="parent">
            <div id="target"></div>
        </div>
    </td></tr>
</table>

CSS

body {
    margin: 50px;
}

#parent {
    width: 50%;
    height: 200px;
    background: #eee;
    padding: 20px;
}

#target {
    width: 40px;
    height: 40px;
    background: #000;
}

.created {
    position: absolute;
    background: red;
    z-index: 10;
    width: 10px;
    height: 10px;
}

JavaScript

function positionOver(targetNode) {
    var el = document.createElement("div"),
        left = targetNode.offsetLeft,
        top = targetNode.offsetTop,
        testParent = targetNode.offsetParent;
    
    while (testParent) {
        if (
            testParent.tagName === "TD" ||
            testParent.tagName === "TH" ||
            testParent.tagName === "TABLE"
        ) {
            left += testParent.offsetLeft;
            top += testParent.offsetTop;
        }
        testParent = testParent.offsetParent;
    }
    el.style.left = left + "px";
    el.style.top = top + "px";
    el.classList.add("created");
    targetNode.parentNode.appendChild(el);
}

positionOver(document.querySelector("#target"));