JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay">overlay</div>
<div class="div1">div1
    <div class="div1-1">div1-1
        <div class="div1-1-1">div 1-1-1
            <!--<div class="div1-1-1-1">1-1-1-1</div>-->
        </div>
    </div>
    <div class="div1-1-1-1">1-1-1-1</div>
</div>

CSS

/* Styles go here */
 body {
    color:#fff;
}
.overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000;
    /* opacity:.5; */
    z-index:1005;
}
.div1 {
    width:100%;
    height:600px;
    background:red;
    position:relative;
}
.div1-1 {
    width:auto;
    height:600px;
    background:blue;
    position:absolute;
    z-index:2;
    left:40px;
    top:0;
    bottom:0;
    right:0;
}
.div1-1-1 {
    width:100%;
    height:40px;
    background:green;
    position:absolute;
    z-index:15;
    top:0;
    right:0;
    left:0;
}
.div1-1-1-1 {
    width:40px;
    height:40px;
    background:black;
    position:absolute;
    right:0;
    top:0;
    z-index: 1004;
}