title: Table headers are on top of the background of modal message
body: <p>I'm walking around a problem for a long time and I can't find out what is wrong. Here is a print screen.</p>
  
  <p><a href="https://i.stack.imgur.com/akNOv.png" rel="nofollow noreferrer">Print screen</a></p>
  
  <p>I want the background around the green content to be all dark and as you can see the table headers are above the dark. How can I solve it? Here are the css:</p>
  
  <pre><code>.modalMenu {
      display: block;
      position: fixed;
      z-index: 15;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);
  }
  .modal-success-message-content {
      background-color: rgba(0, 230, 0, 0.9);
      margin: 15% auto;
      padding: 10px;
      border-radius: 5px;
      width: 70%;
      height: auto;
  }
  </code></pre>
  
  <p>Here are the css of the framework Im using for the table:</p>
  
  <pre><code>.sticky-table {
      max-width: 100%;
      max-height: 80vh;
      overflow: auto;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      padding: 0!important
  }
  .sticky-table table {
      margin-bottom: 0;
      width: 100%;
      max-width: 100%;
      border-spacing: 0
  }
  .sticky-table table tr.sticky-row td, .sticky-table table tr.sticky-row th {
      background-color: #fafafa;
      border-top: 0;
      position: relative;
      outline: #ddd solid 1px;
      z-index: 3
  }
  .sticky-table table td.sticky-cell, .sticky-table table th.sticky-cell {
      background-color: #fafafa;
      outline: #ddd solid 1px;
      position: relative;
      z-index: 3;
  }
  .sticky-table table tr.sticky-row td.sticky-cell, .sticky-table table tr.sticky-row th.sticky-cell {
      z-index: 4
  }
  </code></pre>
  
  <p><strong>html table</strong></p>
  
  <pre><code>&lt;div style="white-space: nowrap; height: 60vh;" class="sticky-table sticky-headers sticky-ltr-cells" id="divTableContainer"&gt;
      &lt;table class="table table-striped"&gt;
          &lt;thead&gt;
              &lt;tr class="sticky-row"&gt;
                  &lt;th class="sticky-cell"&gt; &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>html modal</strong></p>
  
  <pre><code>&lt;div class="modalMenu"&gt;
      &lt;div class="modal-success-message-content"&gt; &lt;b&gt;SUCESSO: &lt;/b&gt;
      &lt;span id="modalSuccessMessageMsg"&gt;&lt;/span&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>javascript to the headers</strong></p>
  
  <pre><code>jQuery(document).on('stickyTable', function() {
      $(".sticky-headers").scroll(function() {
          $(this).find("table tr.sticky-row th").css('top', $(this).scrollTop());
          $(this).find("table tr.sticky-row td").css('top', $(this).scrollTop());
      });
      $(".sticky-ltr-cells").scroll(function() {
          $(this).find("table th.sticky-cell").css('left', $(this).scrollLeft());
          $(this).find("table td.sticky-cell").css('left', $(this).scrollLeft());
      });
      $(".sticky-rtl-cells").scroll(function() {
          var maxScroll = $(this).find("table").prop("clientWidth") - $(this).prop("clientWidth");
          $(this).find("table th.sticky-cell").css('right', maxScroll - $(this).scrollLeft());
          $(this).find("table td.sticky-cell").css('right', maxScroll - $(this).scrollLeft());
      });
  });
  $( document ).ready(function(){
      $( document ).trigger( "stickyTable" );
  });
  </code></pre>