Geek Answers Handbook

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

I have a problem that only seems to affect Safari and Chrome (aka WebKit). I have an overlay that fills the entire screen, and two rows of the table that I would like to show on top of the overlay. Everything else on the page should appear under the overlay.

The problem is that Safari only displays one of the table rows at the top. Firefox displays correctly as above. I cannot find the root cause of this problem in Safari, but I know that I am not the only one who had a "Safari positioning problem that works in Firefox."

What should I do 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>

: , . . . HTML , JavaScript.

, jQuery? , :

$(firstTableRow).css('position', 'relative').css('z-index', '1000');

Firefox ( Firebug) , , Safari ( Web Inspector) , " " z- auto, , , z-index - 1000.

screenshot

+5
1

CSS 2.1:

"position: relative" table-row, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell table undefined.

, Firefox , WebKit -, , undefined. , .

, div 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>
+6

More articles:


All Articles