z-index is not working properly on material side-nav

Question

I have a project in which I am using angular-material's and materialize-css's side nav together. Angular Material's side-nav is always in open state in the left panel. And for materialize-css's side-nav there is a button to open it on the left side.

For angular-material computed properties are

z-index:2;
position:absolute

and for materialize-css computed properties are

z-index:999;
position:fixed

I have read that

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

So position property is set for both side-nav. But angular-material's side-nav takes priority and show over the materialize-css side-nav. I am not able to figure out how is this possible and what is the reason behind that?

If I set z-index:1 for angular-material then it is behind the materialize-css, but changing z-index of materialize-css to 999999999 not works.

Updated

I have read this on this website, but still unable to understand

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!

Actually z-index is not working for materialize-css's sidenav. As sidenav itself adds an element with z-index:997

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

and 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;
}

so there is an overlay on the screen. I am not able to perform any action on side-nav even though z-index is 999 on it. So the problem is with the z-index of sidenav.

I can not post the whole code as individually sidenav works but this is the dom hierarchy

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

So I have made the Angular Component of materialize-css sidenav.

Update2

Actually the DOM nodes mat-sidenav-container and mat-sidenav-content and which are parent of actual sidenav content has z-index:1 both. And the div that sidenav component inserts into body (direct child, parrelel to my app-root) has z-index:997. As parent of sidenav has less index so I guess the sidenav's z-index does not matter (here 999). If I remove the z-index from mat-sidenav-container and mat-sidenav-content element it works.

and here is the code

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>

But this is not the solution to unset the z-index of all parent, even this is hard to have that info. What is the better solution for this?

Answer 1

Not sure what your problem is. But it sounds like it could be that the z-index is relative to the stacking context.

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

If this is the case b will be underneath c.

This is because b's stacking context, a, is underneath c's

I find it helpful thinking of it in layers.