移动菜单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问题？

回答

相关问题