Change z-index order on a child element

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><a href="#">..</a></li>
    <li><a href="#">..</a></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><a href="#">..</a>
      </li>
      <li><a href="#">..</a>
      </li>
    </ul>
  </div>
</div>
<div id="main"></div>
<div id="box"></div>