title: jQuery: css z-index not working
body: <p>I'm trying to make my table to show on the top of the overlay class. So far so bad. Please help.</p>
  
  <p><a href="http://jsfiddle.net/u96coj0q/">http://jsfiddle.net/u96coj0q/</a></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;&lt;td&gt;Test&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;button&gt;Overlay&lt;/button&gt;
  
  table {
      background-color: white;
      height: 300px;
      width: 300px;
  }
  
  .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.5;
      z-index: 50;
  }
  
  $('button').click(function() {
          $('body').append("&lt;div class='overlay'&gt;&lt;/div&gt;");
          $('table').css('zIndex', '60');
          $('table').css({ zIndex: 60 });
  });
  </code></pre>