JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="parent">
<div id="child">
    Content
</div>
</div>
<div id="output"></div>

CSS

#child {
    position: relative;
    left: 100px;
    top: 100px;
    border: 1px solid #777;
    width: 100px;
}

#parent {
    margin: 100px;
}

body {
    height: 2000px;
    width: 1000px;
}

#output {
    position: fixed;
    top: 0;
    left:0;
    font-family: "Courier New";
}

JavaScript

function show() {
    var offset = $("#child").offset();
    var posY = offset.top - $(window).scrollTop();
    var posX = offset.left - $(window).scrollLeft(); 
    $("#output").html("top:" + posY + ", left:" + posX);
}

show();
$(window).scroll(show);