Angular Material侧边栏层级问题：如何让内容区卡片显示在侧边栏上方

1. 将卡片移至全局DOM层级（body直接子节点） #

既然卡片所在的内容区DOM层级低于sidenav，直接调z-index没用，那可以在卡片显示时，把它从内容区里移到body的直接子节点下。这样卡片的DOM层级和sidenav同级（甚至更高），此时设置z-index: 1000+（比sidenav默认的z-index高）就能让它显示在最上层。

实现方式：

• 在卡片组件里注入Renderer2和ElementRef，获取卡片的DOM元素。
• 触发显示时，用this.renderer.appendChild(document.body, this.elementRef.nativeElement)把卡片移到body下；关闭时再移回原父节点。
• 提前保存原父节点的引用，方便后续恢复位置。

2. 使用Angular CDK Overlay组件 #

Angular CDK的Overlay是专门用来创建悬浮层的工具，它默认会把悬浮元素挂载到body下，还能灵活配置层级、位置等。最关键的是，Overlay的内容可以和原组件共享数据上下文，完全不会断开和视图数据服务的关联。

实现步骤：

• 先把OverlayModule导入到你的模块中。
• 在触发卡片显示的组件里注入Overlay服务。
• 创建OverlayConfig，设置位置策略（比如和触发按钮对齐），并配置zIndex为高于sidenav的值。
• 用overlay.create(config)创建Overlay实例，再把卡片组件作为内容模板插入进去。

3. 调整DOM结构，让卡片与sidenav同级 #

修改现有DOM结构，把卡片从sidenav-content里移出来，放到和mat-sidenav-container同级的位置（比如同一个父容器下）。这样卡片和sidenav的DOM层级是平级的，只要给卡片设置比sidenav更高的z-index，就能覆盖在sidenav上方。

示例结构：

<div class="app-wrapper">
  <mat-sidenav-container>
    <mat-sidenav #sidenav mode="push">侧边栏内容</mat-sidenav>
    <mat-sidenav-content>主内容区</mat-sidenav-content>
  </mat-sidenav-container>
  <!-- 卡片移到这里，和sidenav-container同级 -->
  <app-float-card *ngIf="showCard"></app-float-card>
</div>

然后给.app-wrapper设置position: relative，给app-float-card设置position: absolute和足够高的z-index（比如z-index: 1050，Angular Material sidenav默认z-index是1000）。

内容的提问来源于stack exchange，提问作者Wanz