JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div class="divOuter">
    <div  class="divInner" id="div1">
        positioned relative to html block 
    </div>
</div>
<div  class="divOuter" style="position:relative;" >
    <div class="divInner" id="div2">
        positioned relative to parent div
    </div>
</div>

<p id="div1result"></p>
<p id="div2result"></p>

CSS

.divOuter { border:1px solid Green;  width:350px; height:50px; padding:2px; margin-left:80px; }
.divInner{border:1px solid Blue;  width:200px; height:50px; padding:2px; position:absolute; left:100px;}

JavaScript

var div1t = $('#div1').position().top;
var div1l = $('#div1').position().left;
var div2t = $('#div2').position().top;
var div2l = $('#div2').position().left;

$('#div1result').text('DIV1 TOP: ' + div1t + ' / LEFT: ' +div1l);
$('#div2result').text('DIV2 TOP: ' + div2t + ' / LEFT: ' +div2l);