时间戳

首页 > 解决方案 > z-index 在材质侧导航上无法正常工作

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

问题描述

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

对于角材料计算的属性是

z-index:2;
position:absolute

对于 materialize-css 计算的属性是

z-index:999;
position:fixed

我读过

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

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

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

更新

我在这个网站上读过这个，但仍然无法理解

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

实际上z-index不适用于materialize-css's 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和DOM 节点两者都有。并且那个组件插入到(direct child, parrelel to my ) 有. 作为父级的索引较少，所以我猜sidenav的并不重要（这里是999）。如果我删除from 和元素，它就可以工作。mat-sidenav-contentsidenavz-index:1divsidenavbodyapp-rootz-index:997sidenavz-indexz-indexmat-sidenav-containermat-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 的解决方案，即使这也很难获得该信息。对此有什么更好的解决方案？

标签： htmlcssangular-materialmaterialize

解决方案

不确定你的问题是什么。但听起来 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的下方

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

推荐阅读