Flotar un div sobre el contenido de la página

Implementé un cuadro emergente que muestra dinámicamente las opciones de búsqueda. Quiero que el cuadro "flote" sobre todo el contenido del sitio. Actualmente, cuando se muestra el cuadro, desplaza todo el contenido debajo y se ve mal.

Creo que ya intenté configurar el índice z del div del cuadro por encima del contenido de la página restante, pero aún así no tuve suerte.

Quieres utilizar el posicionamiento absoluto .

Un elemento de posición absoluta se posiciona en relación con el primer elemento padre que tiene una posición distinta a la estática. Si no se encuentra tal elemento, el bloque contenedor es html

Por ejemplo :

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

Para que funcione, el padre debe ser relativo ( position:relative)

En su caso, esto debería funcionar:

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

Utilizar

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

Para posicionar el div. Asegúrese de que no tenga una etiqueta principal con la posición: relativa;

dar z-index:-1a flash y dar z-index:100a div ..

Sí, cuanto mayor sea el índice Z, mejor. Colocará su elemento de contenido encima de todos los demás elementos de la página. Supongamos que tiene un índice Z para algunos elementos de su página. Busque el más alto y luego asigne un índice Z más alto a su elemento emergente. De esta manera fluirá incluso sobre los otros elementos con índice z. Si no tiene un índice z en ningún elemento de su página, debe dar como z-index: 2; o algo más alto.

El div del contenedor de resultados position: relativesignifica que todavía está en el flujo del documento y cambiará el diseño de los elementos que lo rodean. Necesitas usar position: absolutepara lograr un efecto 'flotante'.

También debe verificar el marcado que está usando, tiene fantasmas <li>sin contenedor <ul>, probablemente podría reemplazar tanto el div#suggestionsy div#autoSuggestionsListcon uno solo <ul>y obtener el resultado deseado.

El siguiente código está funcionando,

<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>