更改子元素的 z-index 顺序

Question

我对子元素中的 z-index 值有疑问。结构如下所示：

#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>

元素#nav的z-index为2，因为底部有box shadow。 #main 的 z-index 为 1，因为当更高时，阴影不可见。还有 #box，它的 z 索引为 3，因为我需要它来覆盖 #nav 的阴影。但它可能具有来自 #main 的 z-index 值，因此它没有涵盖它。请问我该如何解决这个问题？

Answer 1

尝试将 #box 移出 #main 并为其提供自定义 css 代码以将其移至正确位置

    <div id="nav">
      <ul>
        <li><a href="#">..</a></li>
        <li><a href="#">..</a></li>
      </ul>
    </div>

  <div id="box">
  </div>

<div id="main">

</div>

Answer 2

尝试从 #main 中取出 #box 并将其设置为 absolute 以上 right & top 坐标：

#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>

更改子元素的 z-index 顺序

Change z-index order on a child element

html

css

z-index