Materialize CSS - Sidenav 覆盖覆盖所有页面答案

【问题标题】：Materialize CSS - Sidenav overlay covers all the pageMaterialize CSS - Sidenav 覆盖覆盖所有页面
【发布时间】：2016-12-02 08:29:22
【问题描述】：

我正在使用 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>

我意识到 navbar-fixed 的 z-index 为 997（sidenav-overlay 也是 997），我认为这可能会导致问题。但是side-nav的定位是固定的，z-index是999。即使定位固定，是否依赖于它的父级？

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

【问题讨论】：

你发布一些代码吗？
请用 jsfiddle 或 codepen 创建一个演示，以便更好地帮助你
很可能是z-index引起的。默认情况下，导航ul 应该有z-index: 999; 而#sidenav-overlay 是z-index: 997;。确保您没有用自己的属性覆盖 z-index 属性。
@josephting 我没有覆盖任何 z-index 属性。
@BünyaminSarıgül 如果没有正确识别问题，则无法解决问题。此处没有足够的信息来确定问题的原因。

标签： jquery html css materialize

【解决方案1】：

我遇到了同样的问题。因为<ul class="side-nav"> 包含在<div class="navbar-fixed"> 中并且覆盖具有相同的z-index，所以在使用navbar-fixed 时总是会遇到这个问题。

您可以随意调整各种元素的 z-index，但是当激活侧导航时，它们都会导致不太理想的显示效果。

为了解决这个问题，我将<ul class="side-nav">parallel 放在<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>

【讨论】：

是的，我也是这样做的，但忘了回答我的问题。谢谢！
在 2020 年 4 月仍然有效。编辑：在页面更改上，叠加层仍然存在 SPA..

【解决方案2】：

修改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;
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我遇到了同样的问题，而且修复比弄乱任何 z-index 容易得多。只需确保您的实际

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

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

在我看来，这是原本很棒的 Materialise 文档的错。他们明确表示 sidenav HTML 不应包含在 <nav></nav> 标签内，但并未表明它不能在标头标签内工作。

总之，您的触发器需要在<nav></nav> 标记内，并且您的实际sidenav 内容定义在</header> 末尾之后。这比摆弄 z-index 要好，因为这可能会破坏其他东西并成为维护难题。

【讨论】：