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

css firefox google-chrome safari z-index

11,612

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>

11,612

Author by

Mike

Updated on June 09, 2022

Comments

Mike almost 2 years
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.

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".

What should I do in order to make this work in both Firefox and Safari/Chrome?
```
<body>

    <style>
        .ui-widget-overlay {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
        }
    </style>

    <table>
        <tr style="position:relative; z-index:1000;">
            <td>Displays on top in Firefox only</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>

</body>
```
Update: 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.

Maybe the issue lies with jQuery? I'm using this line to add the positioning to the first table row:
```
$(firstTableRow).css('position', 'relative').css('z-index', '1000');
```
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.