JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    
</head>
<body onload="onLoadTest()" style="padding: 0px; margin: 0px;">             
    <div id="box" style="width:600px; height:100px; position:absolute; padding:0px; margin:0px; ">
        <div id="txt" style="top:50%; position:absolute; padding:0px; margin:0px;border: solid 1px">
            im in the position top=50% (which is 50px), plz compare to alert box data
        </div>          
    </div>  
</body>
</html>

JavaScript

alert("document.getElementById('txt').style.top="+document.getElementById('txt').style.top+"\n$(#txt).css('top')="+$('#txt').css('top'));

var divQ = $('#txt').offset();

alert('top is: ' + divQ.top );