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>