Question

我正在使用Materialise 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），我认为这可能会导致问题。但是，侧面导航具有固定的定位和z-index 999.即使它具有固定位置，它是否依赖于其父级？

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

Answer 1

我遇到了同样的问题。由于Key Bindings 包含在<ul class="side-nav"> 和中，因此叠加层具有相同的z-index，因此在使用<div class="navbar-fixed">时始终会遇到此问题。

你可以搞乱各种元素的z索引，但是当侧面导航被激活时，它们每个都会导致不太理想的显示。

要解决此问题，我将navbar-fixed并行放在<ul class="side-nav">的文档结构中，问题自行解决。像这样：

<div class="navbar-fixed">

Answer 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;
}

Answer 3

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

Answer 4

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

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

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

在我看来，这是原本很棒的Materialize文档的错。他们确实明确指出，sidenav HTML不应包含在<nav></nav>标记内，但不要表明它在标题标记内不起作用。

总之，您的触发器必须位于<nav></nav>标记内，并且您的实际sidenav内容将在</header>结束之后定义。这比摆弄z-index更好，因为那样可能会使其他事情中断，并引起维护麻烦。

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

4 个答案: