Является ли z-index единственным способом заставить элемент располагаться поверх другого, если нет, какие еще существуют методы?

Question

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

Я хочу противоположный эффект (оконные крышки div). Я подумал, что это будет просто проблема z-index, но я не могу заставить его работать. Это с IE7, и из чтения немного кажется, что z-index не будет работать, если он не находится внутри элемента, который расположен.

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

Является ли z-index единственной вещью, которая может быть проблемой здесь, или есть что-то еще, о чем я не знаю?

Существуют ли другие способы достижения желаемого эффекта? Я не могу просто скрыть div с помощью jquery или чего-то еще, потому что его часть должна быть видна из-за окна, которое открывается на карте.

Answer 1

Вы попали в контекстную ошибку стека

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Каждый позиционированный div в IE создаст новый контекст стекирования и предотвратит попадание z-index из разных контекстов стеков поверх других.

Решение состоит в том, чтобы иметь нужное окно в дереве (например, в теле) и значение z-index больше, чем z-index всех родителей другого элемента div, охватывающего ваше окно.

Обширная информация, чтобы понять проблему здесь: http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

Answer 2

Проще говоря, порядок элементов в вашем HTML-файле будет определять порядок наложения. Если вы хотите, чтобы элемент был выше другого, убедитесь, что он добавлен позже в HTML.

Вы можете менять порядок наложения только для элементов, которые находятся в одном и том же содержащем элементе. Например, если у вас есть два элемента div, и они оба содержат 3 изображения, вы не можете сделать изображения из второго блока, перейдите под изображениями из первого блока.

Вам нужно планировать свой HTML заранее, если вам нужны сложные стековые заказы.

Answer 3

позиционирование и отрицательные поля - единственный способ заставить элементы перекрываться, о которых я знаю. z-index просто используется для явного указания браузеру, как создавать слои элементов.

Что касается вашей проблемы, IE требует, чтобы элементы контейнера и / или элементы, которые вы перекрывали, имели position:relative; или position:absolute; для правильной работы z-index. Когда кто-то говорит о позиционировании, он обычно подразумевает наличие свойства position в CSS. Также при работе с z-index убедитесь, что перекрывающиеся элементы находятся на одном уровне друг с другом.

Надеюсь, это поможет

Answer 4

Я столкнулся с этой же проблемой пару дней назад и обнаружил, что отрицательный запас по предложению Darko Z работал отлично. (Мой представитель еще не достаточно хорош, чтобы голосовать за Дарко)

Я написал короткое сообщение об этом.

http://www.swards.net/2009/03/layering-html-elements-without-using.html

Answer 5

Если вам нужен более ленивый ответ, вы можете использовать javascript и скрыть div, когда вы нажимаете на карту, и показывать его при закрытии карты.

В любом случае вам придется делать это с любыми вариантами выбора на странице, т. К. Они не работают с z-index.

Answer 6

Как подсказывают другие ответы, position:relative и position:absolute сбрасывают "стековый контекст" в IE.