title: Safari and Chrome CSS table row positioning z-index issue (works in Firefox)
body: <p>I have an issue that only seems to affect Safari and Chrome (aka WebKit). I have an overlay that fills the whole screen, and two table rows that I would like to appear on top of the overlay. Everything else on the page should be displayed below the overlay.</p>
  
  <p>The problem is that Safari only displays one of the table rows on top. Firefox correctly displays both on top. I can't seem to find the root cause of this issue in Safari, but I know I'm not the only one who has had a "Safari positioning issue that works in Firefox".</p>
  
  <p>What should I do in order to make this work in both Firefox and Safari/Chrome?</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;style&gt;
          .ui-widget-overlay {
              display: block;
              position: absolute;
              width: 100%;
              height: 100%;
              background: #000;
              opacity: 0.5;
          }
      &lt;/style&gt;
  
      &lt;table&gt;
          &lt;tr style="position:relative; z-index:1000;"&gt;
              &lt;td&gt;Displays on top in Firefox only&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div style="position:relative; z-index:1000;"&gt;
                      Displays on top in both Safari and Firefox
                  &lt;/div&gt;
                  &lt;span class="ui-widget-overlay"&gt;&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Displays below overlay&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Displays below overlay&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Displays below overlay&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Update:</strong> Apparently the code sample above displays correctly. However, that is just a sample. It's not the actual code. The HTML is identical, but I am applying the styles dynamically with JavaScript. </p>
  
  <p>Maybe the issue lies with jQuery? I'm using this line to add the positioning to the first table row:</p>
  
  <pre><code>$(firstTableRow).css('position', 'relative').css('z-index', '1000');
  </code></pre>
  
  <p>In Firefox (using Firebug) I can see that the style is being applied, however in Safari (using Web Inspector) it says that the "computed style" of that table row is statically positioned with a z-index of auto, even though the "style attribute" styles say that the position is relative and z-index is 1000.</p>
  
  <p><img src="https://i.stack.imgur.com/zYKG0.png" alt="screenshot"></p>