如何在侧导航边缘添加新的“按钮”

Question

将按钮放在sidenav边缘的最佳方法是什么？

例如这个粉红色的按钮：

在上面的示例中，此按钮完美地放置在两个布局之间

同样我想添加＆＃34;取消＆＃34;我的网页中sidenav边缘的按钮

我正在使用角形材料和柔性盒。

HTML：

<mat-sidenav-container fxLayout="column">
  <div fxLayout="column" >
    <div fxFlex="grow">        
      <button mat-icon-button (click)="sidenav.toggle()">
          <mat-icon>menu</mat-icon>
      </button>
      <button mat-icon-button class="vertposition" (click)="sidenav.toggle()">
        <mat-icon>more_vert</mat-icon>
      </button>
     <float-button icon="add" direction="top" class="addButtonPosition">
        <float-item-button icon="person_add" content="float item 1"></float-item-button>
        <float-item-button icon="gps_fixed" content="float item 2"></float-item-button>
        <float-item-button icon="mode_edit" content="float item 3"></float-item-button>
    </float-button>
    </div>
    <div class="container">
      <div class="mainContentContainer">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
  <mat-sidenav #sidenav [mode]="over">
    <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>clear</mat-icon>
    </button>
    <app-side-nav></app-side-nav>
  </mat-sidenav>
</mat-sidenav-container>

CSS：

.mat-drawer-container {
  background-color: rgba(250, 250, 250, 0);
}
.container{
  display: flex;
  flex-direction: row;
  height: 100vh;
}
.mainContentContainer{
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

.vertposition{
  position: absolute;
  right: 0;
}

.addButtonPosition{
  top: auto !important;
  right: 20px !important;
  bottom: 10px !important;
  left: auto !important;
  position: fixed !important;
}

我正在尝试使用浮动操作按钮替换以下按钮并将其放在sidenav的边缘

<button mat-icon-button (click)="sidenav.toggle()">
  <mat-icon>clear</mat-icon>
</button>