JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.position.js"></script>
<br>SCROLL DOWN TO SEE THE PROBLEM<br><br><br><br>


<div class="outer relative">
    Relative-positioned container
    <div class="inner fixed">Fixed div inside a<br>non-fixed parent</div>
</div>

<br><br>

<div class="outer fixed">
    Fixed-positioned container
    <div class="inner relative">Relative div inside a<br>fixed parent</div>
</div>






<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

CSS

div {
    border: 1px solid #777;
    text-align: center;
}
.outer {
    background: #f5f5f5;
    width: 450px; height: 100px;
}
.inner {
    background: #e5e5e5;
    width: 150px; height: 45px;
    left: 20px;
}
.pos {
    background: #ffd;
    width: 150px; height: 30px;
}
.fixed { position: fixed; }
.relative { position: relative; }

JavaScript

$(function(){
    
    // Various positioned elements on the screen
    var originalElements = [
        $('.inner.fixed'),
        $('.inner.relative')
    ];
    
    
    $.each(originalElements, function(i, original){
        
        // Create a new element for positioning
        // adjacent to the original element (tooltip style)
        var tooltip = $('<div class="pos">next to: ' + original.attr('class') + '</div>');
        
        // Position next to the original
        tooltip.insertAfter(original).position({
            of: original,
            my: 'left center',
            at: 'right center'
        });
        
    });
    
    
});