JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    Content
</div>
<div id="overlay1">Position Overlay</div>
<div id="overlay2">Offset Overlay</div>

CSS

body
{
    background-color:#DDDDDD;
}

#box
{
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
    border:solid 50px #AAAAAA;
    background-color:#777777;
    margin:50px;
    padding:50px;
}

#overlay1
{
    position: absolute;
    color: red;
    border: solid 1px black;
}

#overlay2
{
    position: absolute;
    color: red;
    border: solid 1px black;
}

JavaScript

var position = $('#box').position();
var offset = $('#box').offset();

// The target element's point of origin (0,0) includes the element's margin
$('#overlay1').css('top', position.top);
$('#overlay1').css('left', position.left);

// The target element's point of origin (0,0) does NOT include the element's margin
$('#overlay2').css('top', offset.top);
$('#overlay2').css('left', offset.left);