移動菜單z-index問題？

我的手機菜單出現問題，它看起來像是菜單切換時出現z-index問題，它出現在下面的內容後面。不過，我一直在玩這個，我無法將切換的菜單放到前面。移動菜單z-index問題？

代碼： HTML：

 <section class="navigation"> 
      <div class="nav-container"> 
       <div class="brand"> 
        <a href="/" title="Storey &#38; Co. Solicitors" rel="home"><img class="header-image" src="assets/img/storey-and-co-logo.png" alt="Storey &#38; Co. Solicitors" title="Storey &#38; Co. Solicitors"></a> 
       </div> 
       <nav> 
        <div class="nav-mobile"> 
         <a id="nav-toggle" href="#!"><span></span></a> 
        </div> 
        <ul class="nav-list"> 
         <li> 
          <a href="about-us.html">About Us</a> 
         </li> 
         <li> 
          <a href="our-team.html">Our Team</a> 
         </li> 
         <li> 
          <a href="services.html">Services</a> 
          <ul class="nav-dropdown"> 
           <li> 
            <a href="divorce.html">Divorce</a> 
           </li> 
           <li> 
            <a href="wills.html">Wills</a> 
           </li> 
           <li> 
            <a href="residential.html">Residential</a> 
           </li> 
          </ul> 
         </li> 
         <li> 
          <a href="contact.html">Contact</a> 
         </li> 
         <li class="nav-highlight"> 
          <a href="https://www.perfectportal.co.uk" target="_blank">Obtain a Quote</a> 
         </li> 
        </ul> 
       </nav> 
      </div> 
     </section>

jQuery的

 (function($) { 
      $(function() { 
      $('nav>ul>li').addEventListener('click',function() { 
       $(this).children('.nav-dropdown').show(); 
      }); 
      $('nav>ul>li').mouseleave(function() { 
       $('.nav-dropdown').hide(); 
      }); 
      }); 
      document.querySelector('#nav-toggle').addEventListener('click', function() { 
      this.classList.toggle('active'); 
      }); 
      $('#nav-toggle').click(function() { 
      $('nav ul').toggle(); 
      }); 
     })(jQuery);

薩斯

 header 
      background: $brand-primary 
      height: $nav-height 
      clear: both 

     section.navigation 
      padding: 0px 
      clear: both 

     nav 
      float: right 
      ul 
      list-style: none 
      margin: 0 
      padding: 0 
      li 
       float: left 
       position: relative 
       a 
       display: block 
       padding: 0 20px 
       line-height: $nav-height 
       background: $brand-primary 
       color: #fff 
       text-decoration: none 
       &:hover 
        background: $brand-3-dark 
        color: #fff 
       &:not(:only-child):after 
        padding-left: 4px 
        content: ' ▾' 
       ul li 
       min-width: 190px 
       & a 
        padding: 15px 
        line-height: 20px 
        z-index: 1 

     .nav-highlight a 
      background: $brand-3-dark 
      color: #fff 

      &:hover 
       background: $brand-3-primary 

     .nav-dropdown 
      position: absolute 
      display: none 
      z-index: 1 
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) 

     .nav-mobile 
      display: none 
      position: absolute 
      top: 0 
      right: 0 
      background: $brand-primary 
      height: $nav-height 
      width: $nav-height 

     #nav-toggle 
      position: relative 
      z-index: 9 
      left: 18px 
      top: 22px 
      cursor: pointer 
      padding: 10px 35px 16px 0px 
      span, 
      span:before, 
      span:after 
      cursor: pointer 
      border-radius: 1px 
      height: 5px 
      width: 35px 
      background: #fff 
      position: absolute 
      display: block 
      content: '' 
      transition: all 300ms ease-in-out 
      span:before 
      top: -10px 
      span:after 
      bottom: -10px 
      &.active span 
      background-color: transparent 
      &:before, 
      &:after 
       top: 0 
      &:before 
       transform: rotate(45deg) 
      &:after 
       transform: rotate(-45deg) 

     @media only screen and (max-width: $breakpoint) 
      .nav-mobile 
      display: block 
      nav 
      width: 100% 
      padding: $nav-height 0 15px 
      ul 
       display: none 
       li 
       float: none 
       a 
        padding: 15px 
        line-height: 20px 
       ul li a 
        padding-left: 30px 
      .nav-dropdown 
      position: static 

     @media screen and (min-width: $breakpoint) 
      .nav-list 
      display: block !important 

     .navigation 
      height: $nav-height 
      background: $brand-primary 

     .nav-container 
      max-width: $content-width 
      margin: 0 auto 

     .brand 
      position: absolute 
      float: left 
      padding-top: 10px 
      vertical-align: middle 
      text-transform: uppercase 
      font-size: 1.4em 
      box-sizing: border-box 
      a, 
      a:visited 
      color: #fff 
      text-decoration: none 

     img.header-image 
      max-width: 200px 

     @media screen and (max-width: $breakpoint-small) 
      img.header-image 
       max-width: 175px 
       padding-top: 10px

和Live版本是在這裏：http://staging-maris-storey.transitiongraphics.co.uk/

幫助讚賞

來源

2017-06-22 Grant Smith

解釋如何重現問題。我不知道現場版本中要做什麼才能看到問題 – mikepa88

我認爲這是因爲'.navigation'和'header'中的靜態高度。 – Huelfe

哦，對，它在移動，我正在尋找桌面。對不起 – mikepa88

嘗試增加的相對位置和較高的z-index到您的導航：

nav { 
    position: relative; 
    z-index: 9; 
}

來源

2017-06-22 12:53:28

感謝您的迴應，但這並沒有奏效 –

我不知道爲什麼張曼玉塞裏諾答案是不是爲你工作，因爲當我測試工作它。但是另一種解決方案是將clear:both;添加到第一部分。這個問題是由您的固定高度header造成的，這導致下面的部分不會被下拉下拉。

header + section { 
    clear:both; 
}

來源

2017-06-22 14:24:32 WizardCoder

我同意這兩個解決方案都應該可以工作，但有些東西顯然還不完全正確？ –

@GrantSmith您是否嘗試過在建議的CSS更改後清除您的手機瀏覽器緩存？ – WizardCoder

是的，也嘗試在瀏覽器上的開發模式，同樣的問題？ –

@Grant Smith如果您希望菜單覆蓋您需要給它絕對位置的內容（並且父母需要是相對的）。我試了一下你的舞臺上，你應該添加：

nav { 
    position: relative; 
    // your other attributes 
} 

.nav-list { 
    position: absolute; 
    width: 100%; 
    // your other attributes 
}

讓我知道它是否工作。

來源

2017-06-23 08:25:06

移動菜單z-index問題？

回答

相關問題