JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">Parent
    <div class="kid kid1">Kid1
        <div class="kid-above-all">
            <div class="aboveall">AboveAll</div>
        </div>
    </div>
    <div class="kid kid2">Kid2</div>  
</div>

CSS

.parent{
    position:relative;
    background-color:blue;
    width:650px;
    height:400px;
}
.kid{
    position:absolute;
    background-color:yellow;
    width:300px;
    height:100px;
    z-index:2; 
}
.kid1{left:10px;z-index:3}
.kid2{left:330px;}
.kid-above-all{
    position:relative;
    width:20px;
    height:0;
    z-index:10000;
}
.aboveall{
    position:fixed;
    width:550px;
    height:30px;
    left:150px;
    top:30px;
    background-color:green;
    border:solid 2px black;
}