Поместить элемент div над содержимым страницы

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

Я считаю, что я уже пытался установить z-index в поле div выше, чем на оставшееся содержимое страницы, но все равно не повезло.

Ответы

Ответ 1

Вы хотите использовать абсолютное позиционирование .

Элемент абсолютной позиции позиционируется относительно первого родительский элемент, который имеет позицию кроме статического. Если такой элемент, содержащий блок HTML

Например:

.yourDiv{
  position:absolute;
  top: 123px;
}

Чтобы заставить его работать, родитель должен быть относительным (position:relative)

В вашем случае это должно сделать трюк:

.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}

Ответ 2

Использование

position: absolute;
top: ...px;
left: ...px;

Чтобы поместить div. Убедитесь, что у него нет родительского тега с позицией: relative;

Ответ 3

дайте z-index:-1 для прошивки и дайте z-index:100 div.

Ответ 4

Да, чем выше z-индекс, тем лучше. Он позиционирует ваш элемент контента поверх всех других элементов на странице. Скажем, у вас есть z-индекс для некоторых элементов на вашей странице. Ищите самый высокий, а затем введите более высокий индекс z для вашего всплывающего элемента. Таким образом, он будет течь даже над другими элементами с z-индексом. Если у вас нет z-индекса в любом элементе вашей страницы, вы должны указать как z-index: 2; или что-то более высокое.

Ответ 5

У контейнера div результатов есть position: relative, что означает, что он все еще находится в потоке документа и изменяет расположение элементов вокруг него. Для достижения "плавающего" эффекта вам нужно использовать position: absolute.

Вы также должны проверить используемую разметку, у вас есть phantom <li> без контейнера <ul>, вы могли бы заменить оба div#suggestions и div#autoSuggestionsList на один <ul> и получить желаемый результат.