title: Why table with z-index is not showing over others?
body: <p>I have two tables one of them is shown and the other is hidden.<br>
  When the page load I show the other using jQuery and it shows perfectly but the problem is that I want the hidden table to be shown over the other I used <code>z-index</code> but the table still shows next to each others.</p>
  
  <pre><code>&lt;table border="1" class="mask"&gt;
      &lt;tr&gt;
          &lt;td&gt;this table should be over the background&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="mask1" border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;this table should be in the background&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.mask {
      display:none;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
      setTimeout(function(){
          get = $(document).find('.mask');
          $(get).show();
          $(get).css({"background-color": "red","z-index": "999"});
      },5000);
  });
  </code></pre>
  
  <p>I show the table and the background takes the red color but the <code>z-index</code> does not work as it should and the table did not show over any other thing.<br>
  Is there something missing?</p>