Umieść element div nad zawartością strony

Zaimplementowałem wyskakujące okienko, które dynamicznie wyświetla opcje wyszukiwania. Chcę, aby pole „unosiło się” nad całą zawartością witryny. Obecnie, gdy pole jest wyświetlane, zastępuje całą zawartość poniżej i wygląda źle.

Wydaje mi się, że próbowałem już ustawić indeks z elementu div w pudełku na wyższy niż pozostałej zawartości strony, ale nadal bez powodzenia.

Chcesz użyć pozycjonowania bezwzględnego .

Element pozycji bezwzględnej jest pozycjonowany względem pierwszego elementu nadrzędnego, który ma pozycję inną niż statyczna. Jeśli taki element nie zostanie znaleziony, blokiem zawierającym jest html

Na przykład :

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

Aby to zadziałało, rodzic musi być krewnym ( position:relative)

W twoim przypadku powinno to załatwić sprawę:

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

Posługiwać się

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

Aby ustawić div. Upewnij się, że nie ma tagu nadrzędnego z pozycją: względna;

daj z-index:-1do flashowania i daj z-index:100do div ..

Tak, im wyższy indeks Z, tym lepiej. Umieści Twój element treści na górze każdego innego elementu na stronie. Załóżmy, że masz indeks Z do niektórych elementów na swojej stronie. Poszukaj najwyższego, a następnie nadaj wyższy indeks z dla elementu popup. W ten sposób przepłynie nawet nad innymi elementami z indeksem Z. Jeśli nie masz z-index w żadnym elemencie na swojej stronie, powinieneś podać jak z-index: 2; lub coś wyższego.

Element div kontenera wyników position: relativeoznacza, że ​​nadal znajduje się w obiegu dokumentów i zmieni układ otaczających go elementów. Musisz użyć, position: absoluteaby uzyskać efekt „unoszenia się”.

Powinieneś również sprawdzić znaczniki, których używasz, masz fantomy <li>bez kontenera <ul>, prawdopodobnie mógłbyś zamienić oba div#suggestionsi div#autoSuggestionsListna pojedynczy <ul>i uzyskać pożądany rezultat.

Poniższy kod działa,

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