Как сделать Div отображаться поверх всего остального на экране?

У меня есть следующее всплывающее окно:

Но когда я перемещаю это всплывающее окно вверх, чтобы появиться над картой, он становится скрытым:

Я пробовал установить z-index на моей странице свойств CSS, но это не сработало.

Есть ли какое-то свойство HTML/CSS, которое можно установить так, чтобы всплывающее окно, которое является DIV, на самом деле всегда накладывается поверх всего остального?

Ответы

Ответ 1

z-index - не тот простой друг. На самом деле это не имеет значения, если вы положили z-index:999999999999..... Но это имеет значение, КОГДА вы дали ему, что z-index. Различные dom-элементы имеют приоритет друг над другом.

Я сделал одно решение, в котором я использовал jQuery для изменения элементов css и дал ему z-index только тогда, когда мне нужен элемент, который должен быть сверху. Таким образом, мы можем быть уверены, что z-index этого элемента был указан последним, и индекс будет отмечен. Для этого требуется какое-то действие, которое нужно обработать, но в вашем случае это кажется возможным.

Не уверен, что это работает, но вы можете попробовать также указать параметр !important:

#desired_element { z-index: 99 !important; }

Ссылка philipwalton.com

Ответ 2

Используете ли вы position: relative?

Попробуйте установить position: relative, а затем z-index, потому что вы хотите, чтобы этот div имел z-индекс по отношению к другому div.

Кстати, ваш браузер важно проверить, работает ли он или нет. Ни IE, ни Firefox не являются хорошими.

Ответ 3

Установите индекс 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/

Ответ 4

вы должны использовать position:fixed, чтобы сделать значения z-index применимыми к вашему div

Ответ 5

Попробуйте установить положение в абсолютное, т.е.

#yourDiv{
    position: absolute;
    z-index: 10;
};

Ответ 6

Одна из форм для этого - вставить панель, которую вы хотите развернуть внутри DIV, настроенной как относительная: покажите вам:

<div style="position:relative">
  <div style="position:absolute; z-index: 1000;">
    your code
  </div>
<div>

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

Я надеюсь, что эта помощь

Ответ 7

выпадающие списки всегда отображаются вверху, единственное решение для этой проблемы - скрывать выпадающие списки при отображении изображения (отображение: блок или видимость: видимый) и показывать их при скрытом изображении (отображение: нет или видимость: скрыто)