实现CSS - Sidenav覆盖覆盖所有页面
我正在使用Materialise css,并且我想在中和小屏幕中将导航栏变成sidenav。我做了就像在documentation。问题是,当我点击菜单按钮,sidenav被打开,但它是像下面实现CSS - Sidenav覆盖覆盖所有页面
像我无法点击,因为sidenav叠加的sidenav链接覆盖所有页面即使是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>
我意识到,导航栏固定有997 z-index
(其中sidenav叠加也是997),我认为这可能会导致问题。但是,side-nav具有固定位置和999的z-index
。即使它具有固定位置,它是否依赖于其父项?
编辑:我可以通过更改sidenav-overlay的left
属性来解决它,但我不想手动设置它。我正在寻找另一种解决方案。
我有同样的问题。由于<ul class="side-nav">
包含在<div class="navbar-fixed">
和中,所以叠加层具有相同的z-索引,使用navbar-fixed
时总是会遇到此问题。
您可以使用各种元素的z索引,但是当激活side-nav时,它们每个都会导致不理想的显示。
要解决这个问题,我把<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>
是的,我做了同样的方法,但忘了回答我的问题。谢谢! –
你是否发布了一些代码? –
请使用jsfiddle或codepen创建演示,以更好地帮助您 –
很可能是由'z-index'引起的。默认情况下,导航'ul'应该有'z-index:999;'而'#sidenav-overlay'是'z-index:997;'。确保你没有重写你自己的'z-index'属性。 – josephting