JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="main-content">
        <br><br><br>
        <span>Yo!</span>
        <button>Stays Behind</button>
        <button id="toggle">Stays infront</button><br><br><br>
    </div>
    <div class="modal hidden">&nbsp;</div>
</div>

CSS

.container {
    position: relative;    
}

#toggle {
    z-index: 200;
    position: absolute;
}

.modal {
    z-index: 100;
    background: rgba(100,100,100,0.5);
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}

.hidden {
    display:none;
}

JavaScript

$("#toggle").on("click", function(){
    $(".modal").toggleClass("hidden");    
});