z-index 在材质侧导航上无法正常工作

Question

我有一个项目，我同时使用angular-material 和materialize-css 的侧导航。 Angular Material 的侧导航在左侧面板中始终处于打开状态。而materialize-css的side-nav在左侧有一个按钮可以打开它。

对于角度材料的计算属性是

z-index:2;
position:absolute

对于 materialize-css 的计算属性是

z-index:999;
position:fixed

我已经看过了

z-index 仅适用于定位元素（位置：绝对， 位置：相对，或位置：固定）。

因此为两侧导航设置了位置属性。但是 angular-material 的侧导航优先并显示在 materialize-css 侧导航。我无法弄清楚这怎么可能，背后的原因是什么？

如果我为 angular-material 设置 z-index:1，那么它在 materialize-css 后面，但是将 materialize-css 的 z-index 更改为 999999999 不起作用。

更新

我在this website 上读过这篇文章，但仍然无法理解

每个堆叠上下文都有一个 HTML 元素作为其根元素。 当在元素上形成新的堆叠上下文时，该堆叠 context 将其所有子元素限制在 堆叠顺序。这意味着如果一个元素包含在一个 在堆叠顺序的底部堆叠上下文，没有办法 让它以不同的方式出现在另一个元素的前面 在堆叠顺序中较高的堆叠上下文，即使使用 z-index 十亿！

实际上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;
}

所以屏幕上有一个叠加层。即使 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)

所以我做了materialize-css sidenav的Angular Component。

更新2

实际上 DOM 节点 mat-sidenav-container 和 mat-sidenav-content 是实际 sidenav 内容的父节点，两者都有 z-index:1。并且sidenav 组件插入到body 中的div（直接子，与我的app-root 平行）具有z-index:997。作为sidenav 的父级，索引较少，所以我猜sidenav 的z-index 无关紧要（这里是999）。如果我从中删除 z-index mat-sidenav-container 和 mat-sidenav-content 元素有效。

这是代码

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-index 的解决方案，即使这样也很难获得该信息。对此有什么更好的解决方案？

Answer 1

不确定您的问题是什么。但听起来 z-index 可能是相对于堆叠上下文的。

HTML：

<div class="a">
    <div class="b"> </div>
</div>

<div class="c"> </div>

CSS：

.a, .b, .c {
   position: absolute;
}

.a {
   z-index: 1; 
}

.b {
    z-index: 1000; 
}

.c {
    z-index: 100; 
}

如果是这种情况，b 将在 下方 c。

这是因为 b 的堆叠上下文 a 在下面 c 的

我发现分层思考它很有帮助。