Safari and Chrome CSS table row positioning z-index issue (works in Firefox)

According to the CSS 2.1 specifications:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

I'm assuming that Firefox implements it one way, and WebKit implements it a different way and both are correct since it is undefined. The moral of the story here is not to specify a position on table elements.

I was able to get it to work by wrapping the contents of each cell with a div and positioning the div.

<table>    <tr>        <td>            <div style="position:relative; z-index:1000;">                Displays on top in both Safari and Firefox            </div>        </td>    </tr>    <tr>        <td>            <div style="position:relative; z-index:1000;">                Displays on top in both Safari and Firefox            </div>            <span class="ui-widget-overlay"></span>        </td>    </tr>    <tr>        <td>Displays below overlay</td>    </tr>    <tr>        <td>Displays below overlay</td>    </tr>    <tr>        <td>Displays below overlay</td>    </tr></table>