Вопросы Теги

Проблема с z-индексом позиционирования строк таблицы CSS в Safari и Chrome (работает в Firefox)

У меня проблема, которая влияет только на Safari и Chrome (также известный как WebKit). У меня есть наложение, которое заполняет весь экран, и две строки таблицы, которые я хотел бы разместить поверх наложения. Все остальное на странице должно отображаться под оверлеем.

Проблема в том, что Safari отображает только одну из строк таблицы вверху. Firefox правильно отображает оба сверху. Я не могу найти основную причину этой проблемы в Safari, но я знаю, что m не единственный, у кого была «проблема с позиционированием Safari, которая работает в Firefox».

Что мне делать, чтобы эта функция работала как в Firefox, так и в 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, даже если стили" style attribute "говорят, что позиция является относительной, а z-index равен 1000.

screenshot

5
задан Andrew 31 August 2011 в 20:02
поделиться