我在一个项目中同时使用了angular-material和materialize-css的侧边导航。角形材质的侧边导航在左侧面板中总是处于打开状态。而对于materialize-css的侧边导航，左侧有一个按钮可以打开它。
对于角形材料，计算的属性为

z-index:2;
position:absolute

并且对于物化CSS计算的属性是

z-index:999;
position:fixed

我读过
z-index仅适用于定位的元素（位置：绝对、位置：相对或位置：固定）。
所以位置属性是为两个侧边导航设置的。但是Angular 材质的侧边导航优先显示在物化材质的侧边导航之上。我不知道这是怎么可能的，背后的原因是什么？
如果我为angular-material设置z-index:1，那么它在materialize-css后面，但是将materialize-css的z-index更改为999999999不起作用。

• • 更新**

我在this website上看过这个，但还是看不懂
每个堆叠上下文都有一个HTML元素作为它的根元素。当一个新的堆叠上下文在一个元素上形成时，该堆叠上下文将它的所有子元素限制在堆叠顺序中的一个特定位置。这意味着如果一个元素包含在堆叠顺序底部的堆叠上下文中，即使具有十亿的z索引，也没有办法使它出现在不同堆叠上下文中的另一个元素之前，所述另一个元素在堆叠顺序中更高!
实际上z-index对materialize-css的sidenav不起作用，因为sidenav本身添加了一个z-index:997元素

<div class="sidenav-overlay" style="display: block; opacity: 1;"></div>

和CSS

.sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 997;
    display: none;
}

所以屏幕上有一个覆盖层。我不能在side-nav上执行任何操作，即使z-index是999。所以问题出在sidenav的z-index上。
我不能单独发布整个代码sidenav的作品，但这是dom层次结构

body
 > app-root (Angular Componet) 
    > mat-sidenav-container (Angular Material)
       > mat-sidenav-content (Angular Material)
          > sidenav (Angular Component) 
             > div
                > div (Materialize CSS Sidenav content)

所以我做了物化的Angular 组件-css sidenav。

• • 更新2**

实际上，DOM节点mat-sidenav-container和mat-sidenav-content是实际sidenav内容的父节点，它们都具有z-index:1，并且sidenav组件插入到body中的div（直接子，与我的app-root相同）有z-index:997。因为sidenav的父节点有较少的索引，所以我猜sidenav的z-index并不重要如果我从mat-sidenav-container和mat-sidenav-content元素中删除z-index，它就可以工作。
这是代码

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.sidenav');
  var instances = M.Sidenav.init(elems, {});
});

function item() {
  alert("Clicked");
}

.mat-drawer-container {
  position: relative;
  z-index: 1;
}

.mat-drawer-content {
  position: relative;
  z-index: 1;
}

.app-item {
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="mat-drawer-container">
  <div class="mat-drawer-content">
    <a class="sidenav-trigger" href="javascript:void(0)" data-target="2d37c81b-6624-6cba-251d-c3a7fceabc3a">Open</a>

    <div class="sidenav" id="2d37c81b-6624-6cba-251d-c3a7fceabc3a">
      <ul>
        <li class="app-item" onclick="item()">
          <i class="material-icons">dashboard</i>
          <b> App1</b>
        </li>
      </ul>
    </div>
  </div>
</div>

但这不是取消所有父节点的z索引的解决方案，即使这样也很难得到那个信息。什么是更好的解决方案？