サイドインデックスでz-インデックスが機能しない

Question

サイドナビの「上に」ハンバーガーメニューを表示して、後でこのハンバーガーでサイドデナを切り替えます（xで閉じる必要はありません）。

問題は、Zインデックスが無視されているようです。それはなぜですか、そして、sidenavが来てもハンバーガーを前面に持っていくためにはどうすれば解決できますか？

function openNav() { 
 
    document.getElementById("myNav").style.width = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.width = "0%"; 
 
}

.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: blue; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
.front { 
 
    z-index: 1050; 
 
}

<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<h2>Fullscreen Overlay Nav Example</h2> 
 
<span class="front" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

Answer 1

.frontのpositionプロパティを確認してください。 position: static;,position: initial;を無視する。z-index。

あなたは、位置を変えずに

function openNav() { 
 
    document.getElementById("myNav").style.width = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.width = "0%"; 
 
}

.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: blue; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
.front { 
 
    position: absolute; 
 
    z-index: 1050; 
 
}

<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<h2>Fullscreen Overlay Nav Example</h2> 
 
<span class="front" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

Answer 2

Z-indexが唯一の唯一の位置付け要素のために働き、あまりにも唯一、独自のスタッキングコンテキスト内のそのposition: relative;への変更をz-indexを与えたい場合。 <span class="front" ...">&#9776; open</span>は配置されていません。詳細はthisの記事をご覧ください。可能な重複：Why does z-index not work?。

Answer 3

は、あなたのh2要素にfrontクラスを追加し、frontスタイルにposition: relativeを追加します。以下ではない

function openNav() { 
 
    document.getElementById("myNav").style.width = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.width = "0%"; 
 
}

.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: blue; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
.front { 
 
    z-index: 1050; 
 
    position: relative; 
 
}

<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<h2 class="front">Fullscreen Overlay Nav Example</h2> 
 
<span class="front" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>