title: Why is a nested z-index not working
body: <p>I have a overlay, which i want to display with some information. However, there is a button below the overlay which I want to display over the overlay. I have set the overlay with a z-index of 9998 and the button below it with a z-index of 9999, but it doesn't work. Is this possible at all?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.overlay-message {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      display: table;
      background-color: rgb(0, 0, 0);
      opacity: .9;
      z-index: 9998;
  }
  h4 { display: table-cell;
  color: #fff;text-align: center;
  vertical-align: middle; }
  .container {
      align-items: center;
      width: 100%;
      max-width: 100%;
      height: 100%;
  }
  .row {
      display: table !important;
      align-items: center;
      justify-content: center;
  }
      .one-fifth-flex {
          width: 50%;
          padding-bottom: 20px;
          float: left;
      }
  
      .ico-btn {
          background-color:transparent;
          color:rgb(26, 188, 156);
          border-color:rgb(26, 188, 156);
          border-style: solid;
          border-width: 10px;
          width:100px;
          z-index: 9999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="overlay-message"&gt;
        &lt;h4&gt;Hey! Tap on the button above!&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="one-fifth-flex"&gt;
              &lt;div role="button"  class="ico-btn"&gt;
                  Me
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>