Я реализовал всплывающее окно, в котором динамически отображаются параметры поиска. Я хочу, чтобы ящик "плавал" над всем содержимым сайта. В настоящее время, когда отображается окно, он смещает все содержимое ниже и выглядит плохо.
Я считаю, что я уже пытался установить z-index в поле div выше, чем на оставшееся содержимое страницы, но все равно не повезло.
Вы хотите использовать абсолютное позиционирование .
Элемент абсолютной позиции позиционируется относительно первого родительский элемент, который имеет позицию кроме статического. Если такой элемент, содержащий блок HTML
Например:
.yourDiv{
position:absolute;
top: 123px;
}
Чтобы заставить его работать, родитель должен быть относительным (position:relative)
В вашем случае это должно сделать трюк:
.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}
Использование
position: absolute;
top: ...px;
left: ...px;
Чтобы поместить div. Убедитесь, что у него нет родительского тега с позицией: relative;
дайте z-index:-1 для прошивки и дайте z-index:100 div.
Да, чем выше z-индекс, тем лучше. Он позиционирует ваш элемент контента поверх всех других элементов на странице. Скажем, у вас есть z-индекс для некоторых элементов на вашей странице. Ищите самый высокий, а затем введите более высокий индекс z для вашего всплывающего элемента. Таким образом, он будет течь даже над другими элементами с z-индексом. Если у вас нет z-индекса в любом элементе вашей страницы, вы должны указать как z-index: 2; или что-то более высокое.
У контейнера div результатов есть position: relative, что означает, что он все еще находится в потоке документа и изменяет расположение элементов вокруг него. Для достижения "плавающего" эффекта вам нужно использовать position: absolute.
Вы также должны проверить используемую разметку, у вас есть phantom <li> без контейнера <ul>, вы могли бы заменить оба div#suggestions и div#autoSuggestionsList на один <ul> и получить желаемый результат.