Change z-index order on a child element - html

Question

I have problem with z-index value in child element.
Structure looks like this:
#header {
position: relative;
z-index: 2;
width: 100%;
height: 15vh;
display: block;
margin: 0 auto;
background-color: white;
color: #44a9ff;
padding: 0;
overflow: hidden;
border-bottom: 3px solid #44a9ff;
-webkit-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
}
#main {
position: relative;
z-index: 1;
width: 100%;
height: 75vh;
display: block;
margin: 0 auto;
overflow: hidden;
padding: 0;
background: url('img/main_bg.jpg') no-repeat center center;
background-size: cover;
border-bottom: 3px solid #44a9ff;
}
#box {
position: relative;
z-index: 10;
width: 40%;
height: 38vh;
background-color: #44a9ff;
float: right;
color: white;
display: block;
overflow: hidden;
}
<div id="nav">
<ul>
<li>..</li>
<li>..</li>
</ul>
</div>
<div id="main">
<div id="box">
</div>
</div>
Element #nav has z-index 2, because there is box shadow in the bottom. #main has z-index 1, because when is higher, shadow is not visible. And than there is #box, which has z index 3, because I need it to cover shadow from #nav. But it probably has value of z-index from #main, so it doesn't cover it. How could I fix this please?

Answer 1

Try taking #box out of #main and setting it absolute above with right & top coordinates:
#header {
position: relative;
z-index: 2;
width: 100%;
height: 15vh;
display: block;
margin: 0 auto;
background-color: white;
color: #44a9ff;
padding: 0;
overflow: hidden;
border-bottom: 3px solid #44a9ff;
-webkit-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
}
#main {
position: relative;
z-index: 1;
width: 100%;
height: 75vh;
display: block;
margin: 0 auto;
overflow: hidden;
padding: 0;
background: url('img/main_bg.jpg') no-repeat center center;
background-size: cover;
border-bottom: 3px solid #44a9ff;
background: green;
}
#box {
/* set it absolute */
position: absolute;
/* tweak coordinates to your benefit */
right: 8px;
top: 19vh;
z-index: 3;
width: 40%;
height: 38vh;
background-color: #44a9ff;
color: white;
display: block;
overflow: hidden;
}
<div id="header">
<div id="nav">
<ul>
<li>..
</li>
<li>..
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="box"></div>

Answer 2

try moving #box out of #main and give it a custom css code to get it to the right position
<div id="nav">
<ul>
<li>..</li>
<li>..</li>
</ul>
</div>
<div id="box">
</div>
<div id="main">
</div>