jquery - Materialize CSS - Sidenav 覆盖覆盖所有页面

Question

我用的是Materialize css，想把中小屏的导航栏改成sidenav。我就像在 documentation 中那样做了.问题是，当我单击菜单按钮时，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-index 为 997(其中 sidenav-overlay 也是 997)，我认为这可能会导致问题。但是，side-nav 的定位是固定的，z-index 是 999。即使定位是固定的，它是否依赖于它的父级？

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

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>