我尝试创建Angular material Fixed side nav的箱子，但是我在项目中遇到了一些冲突，我的问题是边栏标题未修复，我添加了内容详细信息并滚动了内容，然后标题被隐藏了，
如何解决此问题 请帮我解决这个问题
谢谢。
我的代码
sidenav-fixed-example.html
<mat-toolbar class="example-header">Header</mat-toolbar>
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened class="example-sidenav">
<mat-nav-list>
<!-- Sidebar -->
<ul class="sidebar navbar-nav" >
<div class=" fixed-search " >
<div class="sidebar-date-and-time">
<span class="side-mnu" routerLink='/home'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-home"></i></div>
<div class="p-2 bd-highlight txt-sm">Home</div>
</div>
</span>
<span class="side-mnu-active" routerLink='/categories'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-clipboard-list"></i></div>
<div class="p-2 bd-highlight txt-sm">Categories</div>
</div>
</span>
<span class="side-mnu" routerLink='/customerdetails'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-users"></i></div>
<div class="p-2 bd-highlight txt-sm ">Customers</div>
</div>
</span>
<span class="side-mnu" routerLink='/orderdetails'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-shopping-bag"></i></div>
<div class="p-2 bd-highlight txt-sm">Orders</div>
</div>
</span>
<span class="side-mnu">
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-clipboard-check"></i></div>
<div class="p-2 bd-highlight txt-sm">Sales Items</div>
</div>
</span>
<span class="side-mnu">
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-bullhorn"></i></div>
<div class="p-2 bd-highlight txt-sm">Announcements</div>
</div>
</span>
</div>
</div>
<!--side bar-->
</ul>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content >
Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.
</mat-sidenav-content>
</mat-sidenav-container>
<mat-toolbar class="example-footer">Footer</mat-toolbar>
.css
.example-container {
position: absolute;
top: 60px;
bottom: 60px; height: 100%;
left: 0;
right: 0;
}
.example-sidenav {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
background: rgba(255, 0, 0, 0.5);
}
.example-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.example-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
答案 0 :(得分：2)
如@Deepu在回答中所述，添加z-index:2将确保header保持在sidenav的顶部。
但是，如果sidenav中的链接超出了其容纳的范围，则会产生问题。因此，与设置sidenav相比，计算z-index的高度是更好的选择。
要实现此目的，只需在height: calc(100% -120px);类中添加.example-container。我要从100％的高度中减去120px，因为那是Header的高度和footer的高度之和。
答案 1 :(得分：1)
您必须设置fixedInViewPort属性。
[fixedInViewport]="true"
<mat-sidenav #sidenav mode="side" opened class="example-sidenav" [fixedInViewport]="true" >
答案 2 :(得分：1)
将z-index的值2作为类example-header
.example-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}