JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay"></div>
<div id="content">
    <p>Normal content</p>
    <div id="thisInFront">
        <p>
            Unmasked content.
        </p>
    </div>
</div>

CSS

/* Borders and background added so you can see what is happening. */
#overlay {
    z-index: 20;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(255,0,0,0.1);
}
#content {
    background: white;
    border: 1px solid black;
}

#content #thisInFront {
    position: absolute;
    z-index: 80;
    background: white;
    border: 1px dotted black;
}

JavaScript

$(function() {
    $("#overlay").fadeIn();
  
    $("#thisInFront").css('position', 'absolute');
});