フルスクリーンメニューは唯一の私は、次のHTMLとCSSを持っているナビゲーションバー

Question

に表示されます。問題は、フルスクリーンメニューが実行されているときだけ、ナビゲーションバーに表示されることです。この問題は、Safariを使用している場合にのみ表示されます。

私は私が

.nav { 
position: fixed; 
} 

を退治する問題を解決することができますが、私はまだナビゲーションバーは、ページの上部に固定することにしたいです。

.nav { 
 
    font-family: Arial-BoldMT; 
 
    font-size: 16px; 
 
    list-style: none; 
 
    text-align: right; 
 
    padding: 0px 0 0px 0; 
 
    box-shadow:0px 1px 1px #d3d3d3; 
 
    background-color: white; 
 
    width: 100%; 
 
    z-index:0.1; 
 
    overflow: auto; 
 
    position: fixed; 
 
    top: 0; 
 
} 
 

 
.nav p { 
 
    float: left; 
 
    margin-left: 40px; 
 
    color: #333333; 
 
} 
 

 

 

 

 
.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    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; 
 
} 
 

 
.slider { 
 
    font-size:30px; 
 
    cursor:pointer; 
 
    float:right; 
 
    margin-right: 40px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .overlay a {font-size: 20px} 
 
    .overlay .closebtn { 
 
    font-size: 40px; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
}

<div class="nav"> 
 

 
    <p>LIAM VINSON</p> 
 

 
    <div id="myNav" class="overlay"> 
 
     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
     <div class="overlay-content"> 
 
      <a href="index.html">HOME</a> 
 
      <a href="about.html">ABOUT</a> 
 
      <a href="photography.html">PHOTOGRAPHY</a> 
 
      <a href="portfolio.html">PORTFOLIO</a> 
 
      <a href="contact.html">CONTACT</a> 
 
     </div> 
 
    </div> 
 
    
 
    <span class="slider" onclick="openNav()">&#9776;</span> 
 
    
 
    <script> 
 
    function openNav() { 
 
     document.getElementById("myNav").style.width = "100%"; 
 
    } 
 

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

 
</div>

Answer 1

問題は、NAVのDIVの外側に示されているからオーバーレイを停止

.nav { 
overflow: auto; 
} 

ました。

Answer 2

z-index:0.1; 

有効なCSSではありません。

z屈折率は、整数でなければならない - 負または正のいずれかです。ほとんどのブラウザでは0と見なされている可能性がありますが、Safariはそれをどうしたらいいのか分かりません。 。Zインデックスを2（私はあなたがインデックスの追加要素を持っている場合は外にこれらの番号間隔をお勧めしますけれどもすなわち：：だから、

z-index:1; 

などの整数に変更し、Zインデックスにあなたのオーバーレイを設定する。100 ;およびZインデックス：200;）あなたがそこに着いたことのzインデックスの問題を修正したら、あなたのためのページの一番上にそれを修正する必要があり、0でトップで、固定としてそれを設定する

。