JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="btn1">Show Over DIV</div>
<div id="btn2">Hide Over DIV</div>
<div id="div-under">
    <ul>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
        <li>DIV Under</li>
    </ul></div>
<div id="div-over">
        <ul>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
        <li>DIV Over</li>
    </ul>
</div>
</div>

CSS

#container {
    width: 100%;
    height: 100%;
}
#btn1 {
    position: fixed;
    top: 0;
    left: 200px;
    z-index: 15;
    background-color: yellow;
}

#btn2 {
    display: none;
    position: fixed;
    top: 0;
    left: 300px;
    z-index: 25;
    background-color: yellow;
}

#div-under {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
    background-color: green;
}

#div-over {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 20;
    background-color: red;
}

JavaScript

$("#btn1").on("click", function () {

    $("#div-over").fadeIn();
    $("#btn2").fadeIn();
    $("#btn1").fadeOut();
});

$("#btn2").on("click", function () {

    $("#div-over").fadeOut();
    $("#btn1").fadeIn();
    $("#btn2").fadeOut();
});