z-index在IOS上的Safari上不工作

我是使用Bootstrap的新手，並且遇到了使我的下拉菜單在移動設備上工作的問題。我所有的代碼都能在瀏覽器上完美運行，但是當我進入移動Safari時，下拉菜單不會出現在任何元素前面。我已經嘗試將z-index設置爲大量數字，並移動了應位於z-index下方較低位置的元素。似乎沒有什麼可以做到，所以我的導航會在其他元素前面出現。我將在下面發佈我的代碼。我還應該提到，在小桌面瀏覽器窗口中使用下拉菜單時，它可以按預期工作。這個問題只發生在IOS Safari上。任何幫助將是偉大的，謝謝！z-index在IOS上的Safari上不工作

HTML：

<div id="main_section"> 
    <div class="container"> 
     <!-- Navigation and Logo --> 
     <nav class="navbar navbar-default"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">COILERZ</a> 
      </div> 
      <div class="collapse navbar-collapse pull-right navlapse" id="collapse"> 
       <ul class="nav navbar-nav" id="navigation"> 
        <li><a href="about.php">About</a></li> 
        <li><a href="contact.php">Contact</a></li> 
        <li><a href="terms.php">Terms</a></li> 
        <li id="hide"><a>|</a></li> 
        <li><a href="#login">Login</a></li> 
        <li><a href="#sign_up">Sign Up</a></li> 
       </ul> 
      </div> 
     </nav> 
     <!-- Search Form --> 
     <div id="search_container"> 
      <img src="images/logo.png"> 
      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 pull-center"> 
       <div class="input-group"> 
        <input type="text" class="form-control" placeholder="Search for a coil or wire"> 
        <span class="input-group-btn"> 
         <button class="btn btn-default" type="button"> 
          <span class="glyphicon glyphicon-search"></span> 
         </button> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

#main_section { 
width:100%; 
height:334px; 
background-color:$darkGrey; 
color:$lightGrey; 

.navbar-default { 
    background-color:transparent; 
    border:none; 
    height:75px; 

    .navbar-brand { 
     height:75px; 
     line-height:45px; 
     font-size:36px; 
     color:$lightGrey; 
    } 

    button { 
     border:none; 
     height:75px; 
     margin:0; 

     span { 
      background-color:$lightGrey; 
     } 

     &:hover { 
      background-color:transparent; 
     } 
    } 
} 

#navigation { 
    a { 
     height:75px; 
     line-height:45px; 
     color:$lightGrey; 
     background-color:$darkGrey; 
     z-index:3; 

     &:hover { 
      cursor:pointer; 
      text-decoration:underline; 
     } 
    } 

    @media only screen and (max-width : 768px) { 
     a { 
      height:40px; 
      line-height:20px; 
     } 
    } 
} 

#search_container { 
    z-index:-200; 
    img { 
     width:128px; 
     position:absolute; 
     left:0; 
     right:0; 
     margin:auto; 
    } 

    .pull-center { 
     float:none; 
     margin:0 auto; 
    } 

    .input-group { 
     position:relative; 
     top:138px; 

     input { 
      background-color:$lightGrey; 
      color:$darkGrey; 
      border:none; 
      height:41px; 
     } 

     button { 
      width:125px; 
      background-color:$blue; 
      border:none; 
      @include fadeBG(200ms); 

      span { 
       color:$lightGrey; 
       font-size:24px; 
      } 

      &:hover { 
       background-color:$green; 
       @include fadeBG(200ms); 
       cursor:pointer; 
      } 
     } 
    } 
}

}

來源

2016-03-01 Joe Scotto

添加z-index:到

.navbar-default:

類。

這應該使整個導航欄及其內容。

來源

2016-03-02 01:21:10 JoeyG

非常感謝。 –

沒問題。很高興它對你有效。 – JoeyG

Z-索引需要該元件具有如

position:absolute 
position:relative

它可以得到這樣的位置應用於不正確的ele換貨。

來源

2016-03-01 22:03:39 VikingBlooded

我剛加了'position：relative; z-index：50'到導航中的每個元素，同樣的問題仍然存在。 –

z-index在IOS上的Safari上不工作

回答

相關問題