实现CSS - Sidenav覆盖覆盖所有页面

Question

我正在使用Materialise css,我想在中小屏幕中将导航栏变为sidenav.我就像在文档中那样做了.问题是,当我单击菜单按钮时,sidenav会打开,但它就像下面的图像

我无法点击sidenav中的链接,因为sidenav-overlay覆盖了所有页面甚至sidenav本身.当我尝试点击链接时它正在关闭.有什么建议怎么解决？

HTML:

<div class="navbar-fixed">
    <nav class="">
        <div class="nav-wrapper red lighten-1">
            <div class="container-fluid">
                <a href="#!" class="brand-logo">
                    <img src="img/logo.png">
                </a>
                <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="#">How It Works?</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">More</a></li>
                    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
                </ul>
                <ul class="side-nav" id="mobile-sidenav">
                    <li><a href="#">How It Works?</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">More</a></li>
                    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

我意识到导航栏固定有z-index997(sidenav-overlay也是997),我认为这可能会导致问题.然而,侧导航有固定的定位和z-index999.即使它有固定位置,它是否依赖于它的父母？

编辑:我可以通过更改leftsidenav-overlay 的属性来解决它,但我不想手动设置它.我正在寻找另一种解决方案.

Answer 1

我有同样的问题.因为<ul class="side-nav">包含在内<div class="navbar-fixed"> , 并且叠加层具有相同的z-index,所以在使用时总是会遇到此问题navbar-fixed.

您可以使用各种元素的z索引,但是当激活侧导航时,它们每个都会导致不太理想的显示.

为了解决这个问题,我<ul class="side-nav">在文档结构中并行处理,<div class="navbar-fixed">问题解决了.像这样:

<ul class="side-nav" id="mobile-sidenav">
  <li><a href="#">How It Works?</a></li>
  <li><a href="#">Technology</a></li>
  <li><a href="#">Pricing</a></li>
  <li><a href="#">More</a></li>
  <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
</ul>
<div class="navbar-fixed">
  <nav class="">
    <div class="nav-wrapper red lighten-1">
      <div class="container-fluid">
        <a href="#!" class="brand-logo">
          <img src="img/logo.png">
        </a>
        <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="#">How It Works?</a></li>
          <li><a href="#">Technology</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">More</a></li>
          <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
        </ul>
      </div>
    </div>
  </nav>
</div>