Angular Material与Materialize CSS侧边栏z-index失效问题排查

问题回顾 #

你在项目里同时用了Angular Material的固定侧边栏和Materialize CSS的可触发侧边栏，碰到了个挺费解的问题：明明Materialize侧边栏的z-index设到了999（甚至调得更高），却始终被Angular Material的侧边栏（z-index:2）压在下面，连Materialize自带的遮罩层都能挡住侧边栏，导致没法正常交互。

核心原因分析 #

这完全是堆叠上下文在搞鬼！你后来查到的堆叠上下文概念就是问题的关键：

• Angular Material的mat-sidenav-container和mat-sidenav-content默认设置了z-index:1，这俩元素会创建独立的堆叠上下文。
• 你的Materialize侧边栏是封装在Angular组件里，嵌套在mat-sidenav-content内部的——也就是说它属于这个低层级堆叠上下文的子元素。根据堆叠上下文的规则，子元素的z-index再高，也没法突破父级堆叠上下文的层级限制，哪怕你把它设到999999999也没用。
• 另外Materialize的sidenav-overlay是直接插入到body标签下（和app-root同级），它的z-index:997不受Angular Material容器的堆叠上下文影响，所以会显示在最上层，而你的侧边栏却被困在下方的堆叠上下文里，自然没法点击。

解决方案 #

解决思路很直接：打破Angular Material容器的堆叠上下文限制，让Materialize侧边栏的z-index能正常生效。

具体修改 #

移除或降低mat-drawer-container和mat-drawer-content的z-index属性：

/* 方案1：直接移除z-index，让元素不创建独立堆叠上下文 */
.mat-drawer-container {
  position: relative;
  /* z-index: 1; 删掉这一行 */
}
.mat-drawer-content {
  position: relative;
  /* z-index: 1; 删掉这一行 */
}

/* 方案2：如果需要保留z-index，设为比Materialize侧边栏低的值 */
/* .mat-drawer-container {
  position: relative;
  z-index: 0;
}
.mat-drawer-content {
  position: relative;
  z-index: 0;
} */

.app-item {
  cursor: pointer;
}

这样修改后，Materialize的侧边栏（z-index:999）会正常显示在Angular Material侧边栏（z-index:2）的上方，遮罩层（z-index:997）也会正确显示在内容区域和Materialize侧边栏之间，侧边栏的交互功能也能正常工作了。

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