Вопрос:
У меня есть следующее всплывающее окно:
Но когда я перемещаю это всплывающее окно вверх, чтобы появиться над картой, он становится скрытым:
Я пробовал установить z-index на моей странице свойств CSS, но это не сработало.
Есть ли какое-то свойство HTML/CSS, которое можно установить так, чтобы всплывающее окно, которое является DIV, на самом деле всегда накладывается поверх всего остального?
Лучший ответ:
z-index – не тот простой друг. На самом деле это не имеет значения, если вы положили z-index:999999999999….. Но это имеет значение, КОГДА вы дали ему, что z-index. Различные dom-элементы имеют приоритет друг над другом.
Я сделал одно решение, в котором я использовал jQuery для изменения элементов css и дал ему z-index только тогда, когда мне нужен элемент, который должен быть сверху. Таким образом, мы можем быть уверены, что z-index этого элемента был указан последним, и индекс будет отмечен. Для этого требуется какое-то действие, которое нужно обработать, но в вашем случае это кажется возможным.
Не уверен, что это работает, но вы можете попробовать также указать параметр !important:
#desired_element { z-index: 99 !important; }
Ссылка philipwalton.com
Ответ №1
Используете ли вы position: relative?
Попробуйте установить position: relative, а затем z-index, потому что вы хотите, чтобы этот div имел z-индекс по отношению к другому div.
Кстати, ваш браузер важно проверить, работает ли он или нет. Ни IE, ни Firefox не являются хорошими.
Ответ №2
Установите индекс DIV z на один больше, чем другие DIV. Вам также необходимо убедиться, что у DIV есть и position кроме static.
CSS
#someDiv { z-index:9; }
Подробнее здесь: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Ответ №3
вы должны использовать position:fixed, чтобы сделать значения z-index применимыми к вашему div
Ответ №4
Попробуйте установить положение в абсолютное, т.е.
#yourDiv{ position: absolute; z-index: 10; }; Ответ №5
Одна из форм для этого – вставить панель, которую вы хотите развернуть внутри DIV, настроенной как относительная: покажите вам:
<div style=»position:relative»> <div style=»position:absolute; z-index: 1000;»> your code </div> <div>
Вы используете первый div для размещения внутреннего содержимого в определенной области внутри вашей страницы, а второй абсолют следует отнести к контейнеру (потому что он относительный). Z-индекс в этом случае относится также к контейнеру, и если он выше, чем контейнер должен быть наверху. Вы можете поместить стиль в класс css и изменить размер абсолютного div, чтобы развернуть его при наведении или другое действие, которое вы хотите контролировать.
Я надеюсь, что эта помощь
Ответ №6
выпадающие списки всегда отображаются вверху, единственное решение для этой проблемы – скрывать выпадающие списки при отображении изображения (отображение: блок или видимость: видимый) и показывать их при скрытом изображении (отображение: нет или видимость: скрыто)
