Float a div выше содержимого страницы

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

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

5 ответов


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

абсолютный элемент положения позиционируется относительно первого родительский элемент, имеющий позицию другие, чем статические. Если такой элемент отсутствует найден, содержащий блок 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. Убедитесь, что у него нет родительского тега с position: relative;


дать z-index:-1 вспышка и дать z-index:100 в div..


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


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

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