JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <td class='relative'>
                TD is relative<br />
                <div class='positioned'>
                    Position 1:
                </div>
                <div class='absolute'>
                    Absolute 1:<br />left: 100px<br />top: 100px
                </div>
            </td>
            <td>
                <div class='relative'>
                    DIV is relative<br />
                    <div class='positioned'>
                        Position 2:
                    </div>
                    <div class='absolute'>
                        Absolute 2:<br />left: 100px<br />top: 100px
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    margin: 200px;
}

td {
    border: solid thin #000; 
    background-color: #CCC;
}

.relative { 
    position: relative; 
}

.absolute {
    position: absolute;
    border: solid thin #F00;
    top: 100px;
    left: 100px;
    width: 100px;
    background-color: #FCC;
}

.positioned {
    margin: 20px;
    border: solid thin #0F0;
    width: 100px;
    background-color: #CFC;
}
</style>

JavaScript

$(document).ready(function() {
    $('.positioned').each(function() {
        var div = $(this);
        var pos = div.position();
        var parent = div.offsetParent();
        div.html(div.html() + '<br />parent: ' + parent[0].nodeName + '<br />left: ' + pos.left + '<br />top: ' + pos.top);
    });
});