Google Chrome не уважает z-index

Question

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

Есть идеи?

ССЫЛКА:

Спасибо!

Answer 1

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

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

.

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

Answer 2

Ответ Маркта (см. Первый ответ) великолепен, и это «по определению» свойства 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' отстает от 'first-container', даже если значение z-index для 'fixed-div' и его контейнера ('second-container') больше, чем 'first-container ».

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

Answer 3

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

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

Удачи!

Answer 4

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

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

Answer 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>