Schweben Sie ein Div über den Seiteninhalt

Ich habe ein Popup-Feld implementiert, in dem Suchoptionen dynamisch angezeigt werden. Ich möchte, dass die Box über dem gesamten Inhalt der Website "schwebt". Wenn das Feld angezeigt wird, wird derzeit der gesamte Inhalt darunter verschoben und es sieht schlecht aus.

Ich glaube, ich habe bereits versucht, den Z-Index des Div der Box über den des verbleibenden Seiteninhalts zu setzen, aber immer noch kein Glück.

Sie möchten die absolute Positionierung verwenden .

Ein absolutes Positionselement wird relativ zum ersten übergeordneten Element positioniert, dessen Position nicht statisch ist. Wenn kein solches Element gefunden wird, ist der enthaltende Block HTML

Zum Beispiel :

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

Damit es funktioniert, muss der Elternteil relativ sein ( position:relative)

In Ihrem Fall sollte dies den Trick tun:

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

Verwenden

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

So positionieren Sie die div. Stellen Sie sicher, dass kein übergeordnetes Tag mit der Position: relative vorhanden ist.

gib z-index:-1zu blinken und gib z-index:100zu div ..

Ja, je höher der Z-Index, desto besser. Dadurch wird Ihr Inhaltselement über jedem anderen Element auf der Seite positioniert. Angenommen, Sie haben einen Z-Index für einige Elemente auf Ihrer Seite. Suchen Sie nach dem höchsten und geben Sie Ihrem Popup-Element einen höheren Z-Index. Auf diese Weise fließt es sogar über die anderen Elemente mit Z-Index. Wenn Sie in keinem Element Ihrer Seite einen Z-Index haben, sollten Sie den folgenden Z-Index angeben: 2; oder etwas höheres.

Der folgende Code funktioniert,

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

Der Ergebniscontainer div hat die position: relativeBedeutung, dass er sich noch im Dokumentfluss befindet, und ändert das Layout der Elemente um ihn herum. Sie müssen verwenden position: absolute, um einen "schwebenden" Effekt zu erzielen.

Sie sollten auch das Markup überprüfen, das Sie verwenden. Sie haben Phantome <li>ohne Container <ul>. Sie könnten wahrscheinlich sowohl das div#suggestionsals auch div#autoSuggestionsListdurch ein einzelnes ersetzen <ul>und das gewünschte Ergebnis erzielen.