JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixed">
    <div id="container">
        <button id="btn">I'm a button</button>
        <br>
        <hr>

    </div>
</div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

CSS

#fixed {
    position:fixed;
    border: 1px solid #eee;
    padding: 10px;
    top: 50px;
    right: 50px;
    width: 150px;
}

p {
    margin: 5px 0;
    font-size: 12px;
}

JavaScript

$(function(){
    scrollTo(0, 100);
    $('#btn').each(function(){
        var showMsg = function(msg) {
            $('#container').append($('<p></p>').text(msg))
        }
        
        showMsg('Button Offset: '+this.offsetTop);
        
        showMsg('Container offset: '+$('#container').get(0).offsetTop);
        
        // Make container explicitly relative
        $('#container').css('position', 'relative');
        
        showMsg('Container now has explicit relative position');
        
        showMsg('Button Offset: '+this.offsetTop);
        
        showMsg('Container offset: '+$('#container').get(0).offsetTop);
        
        // Make container display: inline-block
        $('#container').css('display', 'inline-block');
        
        showMsg('Container now has inline-block display');
        
        showMsg('Button Offset: '+this.offsetTop);
        
        showMsg('Container offset: '+$('#container').get(0).offsetTop);   
    });
    
    
});