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

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

5 голосов
/ 04 октября 2010

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

Проблема в том, что Safari отображает только одну из строк таблицы сверху. Firefox правильно отображает оба сверху. Кажется, я не могу найти основную причину этой проблемы в Safari, но я знаю, что я не единственный, у кого была «проблема позиционирования 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, хотя стили «атрибут стиля» говорят, что позиция относительна, а z-индекс равен 1000.

screenshot

1 Ответ

6 голосов
/ 05 октября 2010

В соответствии с CSS 2.1 спецификациями :

Влияние 'position: относительный' на группу строк таблицы, группу заголовков таблицы, нижний колонтитул таблицыэлементы group, table-row, table-column-group, table-column, table-cell и table-caption не определены.

Я предполагаю, что Firefox реализует его одним способом, а WebKitреализует его по-другому, и оба они верны, поскольку он не определен.Мораль этой истории не в том, чтобы указывать позицию на элементах таблицы.

Я смог заставить ее работать, обернув содержимое каждой ячейки с помощью 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>
...