子要素のz-インデックス順序を変更する

Question

子要素のZ-インデックス値に問題があります。 構造は次のようになります。

#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が付いています。これは、より高いときは影が見えないためです。そして、#navの影を覆うために、zインデックス3を持つ#boxがあります。しかし、それはおそらく#mainからz-インデックスの価値を持っているので、それをカバーしていません。どうすればこの問題を解決できますか？

Answer 1

にそれを得るために#mainのうち、#boxを移動してみてくださいし、それをカスタムCSSコードを与える座標：

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

Answer 2

は#mainのうち、#boxを取り、absolutetop & rightして上にそれを設定してみてください右の位置

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

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

<div id="main"> 

</div>