JSFiddle - React, Tailwind, and code Playground
HTML
<div id="outside"></div>
<div id="insideAbsolute"></div>
<div id="insideRelative"></div>
<div class="testAbsolute">test position absolute</div>
<div class="testRelative">test position relative</div>
CSS
body{
position : relative;
}
#insideAbsolute{
background-color:#f8f8f8;
position: absolute;
top:0;
left:20%;
width:60%;
margin-top:35px;
margin-bottom:35px;
z-index:3;
border-radius: 7px;
box-shadow: 6px 6px 20px black;
}
#insideAbsolute:after{
content:'';
height : 35px;
width : 100%;
position : absolute;
bottom : -35px;
}
#insideRelative{
background-color:#f8f8f8;
position: relative;
top:0;
left:20%;
width:60%;
margin-top:35px;
margin-bottom:35px;
z-index:3;
border-radius: 7px;
box-shadow: 6px 6px 20px black;
}
#outside{
position: fixed;
left:0;
top:0;
height: 100%;
width: 100%;
background-color: black;
opacity:0.7;
z-index:2;
background-attachment:fixed;
}
.test{
z-index:1;
}
JavaScript
$('#outside').hide();
$('#insideAbsolute').hide();
$('#insideRelative').hide();
$(document).on('click', '.testAbsolute', function () {
$('#outside').show(0, function() {
$('#insideAbsolute').show(0, function() {
$(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>');
$(document).on('click','#outside',function(){
$('#insideAbsolute').html('');
$('#outside').hide();
});
});
});
});
$(document).on('click', '.testRelative', function () {
$('#outside').show(0, function() {
$('#insideRelative').show(0, function() {
$(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>');
$(document).on('click','#outside',function(){
$('#insideRelative').html('');
$('#outside').hide();
});
});
});
});