更改子元素的Z索引順序

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索引為2，因為底部有框陰影。 #main Z索引為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>