Google Chrome не соблюдает z-index

В соответствии с заголовком, кажется, что Chrome не является игровым. Обратите внимание, что поля формы не могут быть нажаты на левую часть экрана. Это происходит только на некоторых страницах (например, на странице контактов). Похоже, что #left_outer div накладывается на содержимое. Когда я редактирую css через Firebug или Chrome dev toools, он работает, когда я редактирую фактический css и обновляюсь, это не так.

Любые идеи?

LINK:

Спасибо!

Ответ 1

Обычно, когда вы устанавливаете свойство z-index, но все не работает так, как вы могли ожидать, оно связано с атрибутом position.

Для правильной работы z-index элемент должен быть "позиционирован". Это означает, что он должен иметь атрибут position, установленный в один из absolute, relative или fixed.

Обратите внимание, что ваш элемент также будет располагаться относительно первого предка, который позиционируется, если вы используете position: absolute и top, left, right, bottom и т.д.

Ответ 2

Без ссылки, чтобы посмотреть, немного сложно понять, в чем проблема.

У вас есть z-index: -1; где угодно (отрицательное число - это ключ здесь, не имеет значения, номер)? Я обнаружил, что в прошлом это препятствовало взаимодействию контейнера с.

Удачи!

Ответ 3

Ответ Markt (см. первый ответ) велик, и это "по определению" свойства z-index.
Специфические проблемы Chrome обычно связаны с свойством переполнения с нижней нижней части контейнера. Итак, для следующего:

<div class="first-container">...</div>
<div class="second-container">
    <div ...>
         <div class="fixed-div> some text</div>
    <... /div>
</div>

И стили:

.first-container {
    position:relative;
    z-index: 100;
    width: 100%;
    height: 10%;
}

.second-container {
    position:relative;
    z-index: 1000;
    width: 100%;
    height: 90%;
    overflow: auto;
}

.fixed-div {
    position: fixed;
    z-index: 10000;
    height: 110%;
}

происходит фактически следующее (только Chrome, firefox работает как ожидалось)
" Fixed-div " находится за" первым контейнером ", хотя значение z-index" фиксированный-div "и его контейнер (" второй контейнер ") больше, чем" first- контейнер'.

Причина этого заключается в том, что Chrome всегда применяет границы внутри контейнера, который обеспечивает переполнение , хотя у одного из его преемников может быть фиксированная позиция.
Я думаю, вы можете найти для себя искаженную логику... Я не могу - поскольку единственной причиной использования фиксированной позиции является включение поведения" сверху-всего ".
Так что ошибка...

Ответ 4

У меня была странная проблема с zIndex в Chrome, и я продолжал возиться с атрибутом position, чтобы увидеть, работает ли что-то. Но это не так. Оказывается, в моем случае проблема была связана с атрибутом transform. Итак, если у вас есть атрибут преобразования на месте, отключите его, и все должно быть хорошо. Другие браузеры отлично работают с такими вещами, но Chrome, похоже, играет по-другому.

Надеюсь, это помогло вам.

Ответ 5

Я знаю, что это разрешено, но опубликованное решение не сработало для меня. Вот что решило мою проблему:

<act:AutoCompleteExtender ID="ace" runat="server" OnClientShown="clientShown">
</act:AutoCompleteExtender>

<script language="javascript" type="text/javascript">
    function clientShown(ctl, args) {
        ctl._completionListElement.style.zIndex = 99999;
    }
</script>