Розмістіть div над вмістом сторінки

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

Я вважаю, що я вже намагався встановити z-індекс 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дивізіону ..

Так, чим вище z-індекс, тим краще. Він розмістить ваш елемент вмісту поверх кожного іншого елемента на сторінці. Скажімо, у вас є z-індекс для деяких елементів на вашій сторінці. Шукайте найвищий показник, а потім надайте вищий z-індекс своєму спливаючому елементу. Таким чином він буде протікати навіть по інших елементах із z-індексом. Якщо у вас немає z-індексу в жодному елементі на вашій сторінці, ви повинні вказати як z-index: 2; або щось вище.

Контейнер результатів div має position: relativeзначення, що він все ще перебуває в документообігу, і змінить розташування елементів навколо нього. Вам потрібно використовувати position: absoluteдля досягнення "плаваючого" ефекту.

Вам також слід перевірити розмітку, яку ви використовуєте, у вас є фантоми <li>без контейнера <ul>, ви, ймовірно, можете замінити як div#suggestionsі div#autoSuggestionsListна один, так <ul>і отримати бажаний результат.

Наведений нижче код працює,

<style>
    .PanelFloat {
        position: fixed;
        overflow: hidden;
        z-index: 2400;
        opacity: 0.70;
        right: 30px;
        top: 0px !important;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
</style>

<script>
 //The below script will keep the panel float on normal state
 $(function () {
        $(document).on('scroll', function () {
            //Multiplication value shall be changed based on user window
            $('#MyFloatPanel').css('top', 4 * ($(window).scrollTop() / 5));
        });
    });
 //To make the panel float over a bootstrap model which has z-index: 2300, so i specified custom value as 2400
 $(document).on('click', '.btnSearchView', function () {
      $('#MyFloatPanel').addClass('PanelFloat');
  });

  $(document).on('click', '.btnSearchClose', function () {
      $('#MyFloatPanel').removeClass('PanelFloat');
  });
 </script>

 <div class="col-lg-12 col-md-12">
   <div class="col-lg-8 col-md-8" >
    //My scrollable content is here
   </div>
   //This below panel will float while scrolling the above div content
   <div class="col-lg-4 col-md-4" id="MyFloatPanel">
    <div class="row">
     <div class="panel panel-default">
      <div class="panel-heading">Panel Head </div>
     <div class="panel-body ">//Your panel content</div>
   </div>
  </div>
 </div>
</div>