Materialize CSS - 侧边栏覆盖整个页面

Question

我正在使用Materialize css，并希望在中小屏幕上将导航栏转换为侧边栏。我按照文档中的方法来实现。问题是当我点击菜单按钮时，侧边栏会打开，但出现了下面的图片所示的情况。

由于侧边栏覆盖了整个页面，甚至包括侧边栏本身，我无法单击侧边栏中的链接。当我尝试单击链接时，它会关闭。有什么建议如何解决这个问题吗？

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（与侧边栏遮罩层相同），我认为这可能会导致问题。但是，侧边栏具有固定定位和z-index值为999。即使它具有固定位置，它是否仍然依赖于其父元素？

编辑：我可以通过更改侧边栏遮罩层的 left 属性来解决它，但我不想手动设置它。我正在寻找另一种解决方法。

- Bünyamin Sarıgül

---

你可以贴些代码吗？ - ADH - THE TECHIE GUY

很可能是由于z-index引起的。默认情况下，导航ul应该有z-index: 999;，而#sidenav-overlay则为z-index: 997;。确保您没有覆盖自己的z-index属性。 - josephting

@josephting 我再次从浏览器检查了一下，侧边导航的 z-index 为999，而侧边导航覆盖层的 z-index 为997。 - Bünyamin Sarıgül

@BünyaminSarıgül 如果问题没有被正确地识别，那么它就无法解决。这里没有足够的信息来确定问题的原因。 - josephting

我遇到了同样的问题，并使用 #sidenav-overlay { z-index: 996 !important; } 进行了修复，目前还不确定它是否会产生其他副作用。 - A.T.

Answer 1

我遇到了相同的问题。由于<ul class="side-nav">包含在<div class="navbar-fixed">中，并且覆盖层具有相同的z-index，因此在使用navbar-fixed时总是会出现此问题。

您可以尝试更改各个元素的z-index，但每种方法都会导致不理想的显示效果，当激活侧面导航时。

为了解决这个问题，我将<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>

- Richard Luck

---

是的，我用了相同的方式，但忘记回答我的问题。谢谢！ - Bünyamin Sarıgül

仍然适用于2020年4月。编辑：在单页应用程序中，页面更改时覆盖层仍然存在。 - lsabi

Answer 2

修改materialize CSS文件，将#sidenav-overlay中的z-index更改为990。这对我解决了问题。

- Jerusalem Programmer

Answer 3

修改materialize CSS文件，将#sidenav-overlay更改为

#sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 996;
    will-change: opacity;
}

- Avinash Singh

Answer 4

我曾经遇到过同样的问题，解决方法比调整任何z-index要简单得多。只需要确保你实际的

标签在正确的位置结束即可。

<ul class="side-nav" id="mobile-sidenav">

内容位于<header></header>标签之外。如果它位于头部标签内，您将看到您发布在此处的相同行为。

在我看来，这是否则很棒的 Materialize 文档的问题。他们确实清楚地表明，侧边栏 HTML 不应包含在 <nav></nav> 标记中，但没有指出它不能在头部标记中工作。

总之，您的触发器需要在 <nav></nav> 标记内，而您的实际侧边栏内容定义在 </header> 结束后。这比调整 z-index 更好，因为这可能会破坏其他东西，并且会成为维护上的麻烦。

- Joel Wigton