Question

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

对于角度材料计算属性是

z-index:2;
position:absolute

和materialize-css计算属性是

z-index:999;
position:fixed

我已经读过那个

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

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

如果我为角度素材设置了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。

UPDATE2

实际上，DOM节点mat-sidenav-container和mat-sidenav-content以及实际sidenav内容的父节点都有z-index:1。 div组件sidenav组件插入body（直接子项，parrelel到app-root）的z-index:997为sidenav。由于z-index的父级索引较少，因此我认为sidenav＆＃39; s z-index无关紧要（此处为999）。如果我从中移除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"); }元素。

这是代码

＆＃13;

.mat-drawer-container {
  position: relative;
  z-index: 1;
}

.mat-drawer-content {
  position: relative;
  z-index: 1;
}

.app-item {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

            direct get a count of row 
    ============================================
            //Useing model
            $count = Model::count();    

            //example            
            $count1 = Wordlist::count();
    ==============================================

            //Useing query builder
            $count = \DB::table('table_name')->count();

           //example
            $count2 = \DB::table('wordlist')->count();
     ================================================

＆＃13;

但这不是取消设置所有父级的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 下面的

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

z-index在材料侧导航

1 个答案: