我有两个导航。一侧导航栏和一个导航栏。问题是我的sideNav重叠了所有内容。它位于导航栏和页脚的顶部。如何在所有图层下移动它？这是一个有助于图像的图像。enter image description here我正在将MVC与_layout.cshtml页面中的导航栏以及List.cshtml页面中的sidenav一起使用。
SideNav
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-1 fixed">
<ul class="custom-scrollbar">
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect arrow-r">
<i class="fas fa-hand-pointer"></i> Websites<i class="fas fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body">
<ul class="list-unstyled">
<a class="collapsible-header waves-effect arrow-r">
<i class="fas fa-hand-pointer"></i> Sort By Category<i class="fas rotate-icon"></i>
</a>
<li>
<a href="#" class="waves-effect">For authors</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> Marketing<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul class="list-unstyled">
<li>
<a href="#" class="waves-effect">Introduction</a>
</li>
<li>
<a href="#" class="waves-effect">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul class="list-unstyled">
<li>
<a href="#" class="waves-effect">FAQ</a>
</li>
<li>
<a href="#" class="waves-effect">Write a message</a>
</li>
<li>
<a href="#" class="waves-effect">FAQ</a>
</li>
<li>
<a href="#" class="waves-effect">Write a message</a>
</li>
<li>
<a href="#" class="waves-effect">FAQ</a>
</li>
<li>
<a href="#" class="waves-effect">Write a message</a>
</li>
<li>
<a href="#" class="waves-effect">FAQ</a>
</li>
<li>
<a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<li>
<ul class="social">
<li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
<li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
<li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
<li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
</ul>
</li>
<div class="sidenav-bg mask-strong"></div>
</div>
<!--/. Sidebar navigation -->
导航栏
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" style="background-color: #4285f4">
<a class="navbar-brand font-weight-bold" asp-controller="Product" asp-action="List" id="navpadding"><strong>FIVEMANGO</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
@if (User.Identity.IsAuthenticated)
{
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Cart" asp-action="Index">
<i class="fas fa-shopping-cart blue-text"></i> Cart
</a>
</li>
<li class="nav-item dropdown ml-3">
<a class="nav-link dropdown-toggle waves-effect waves-light dark-grey-text font-weight-bold"
id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user blue-text"></i> Profile
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-cyan" aria-labelledby="navbarDropdownMenuLink-4">
@*<a class="dropdown-item waves-effect waves-light" asp-controller="Account" asp-action="Login">Login</a>*@
<a class="dropdown-item waves-effect waves-light" asp-controller="User" asp-action="Index">View Orders</a>
<a class="dropdown-item waves-effect waves-light" asp-controller="Account" asp-action="Logout">Log out</a>
</div>
</li>
</ul>
}
else
{
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Account" asp-action="Register">
<i class="fas fa-registered blue-text"></i> Sign Up
</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Account" asp-action="Login">
<i class="fas fa-user blue-text"></i> Login
</a>
</li>
</ul>
}
</div>
</nav>