Как я могу установить панель инструментов в фиксированное положение, используя угловой дизайн материала?

Question

Как я могу исправить положение панели инструментов, чтобы фиксировать, используя угловой материал?Я пытался с фиксированной позиции, но это не сработало для меня. Можете, пожалуйста, предложить, как я могу это сделать.

Вот мой код:

<div fxLayout="row" fxLayoutAlign="space-between" class="fixed-header header-shadow" style="width:100%;position:relative">
  <mat-toolbar   color="primary" fxFlexFill role="banner" class="header-style header-shadow">
    <mat-toolbar-row>
      <div>
          <a  mat-button  routerLink="#"  routerLinkActive="active" (click)="opened=!opened"><mat-icon class="mat-icon-rtl-mirror mat-icon notranslate mat-icon-no-color ng-star-inserted" role="img">menu</mat-icon></a>
          <a  mat-button  routerLink="#"  routerLinkActive="active">{{application_title}}</a>
      </div>
      <div fxShow="true" fxHide.lt-md="true" class="example-fill-remaining-space">

          <a  mat-button  routerLink="/customer-list"  routerLinkActive="active">Customers</a>
          <a  mat-button  routerLink="/customer-create">Create Customer</a>
          <a  mat-button  routerLink="/login">Login</a>
      </div>
      <div>
          <a  mat-button  routerLink="#"  routerLinkActive="active"><mat-icon>notifications</mat-icon></a>
          <a  mat-button  routerLink="#"  routerLinkActive="active" fxShow="true" fxHide.lt-md="true">Prem Kuma Pallinti</a>
          <a  mat-button  routerLink="#"  routerLinkActive="active" fxShow="true" fxHide.lt-md="true"><img aria-hidden="true" src="C:/Users/Prem/Desktop/FinalApp/images/man-avater.png"></a>
          <a  mat-button  routerLink="/login"><mat-icon class="mat-icon-rtl-mirror mat-icon notranslate mat-icon-no-color ng-star-inserted" role="img">more_vert</mat-icon></a>
      </div>

    </mat-toolbar-row>


    </mat-toolbar>
    <main>
    <router-outlet  style="margin-top: 80px;"></router-outlet>
    </main>

</div>

код

Answer 1

Вы должны удалить style="width:100%;position:relative".И добавить CSS для

.fixed-header: {
   width:100%;
   position: fixed;
   top:0;
   ...
}