Umieść element div nad zawartością strony

81

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.

Eric Di Bari
źródło
2
Możesz chcieć skorzystać z funkcji „lightbox” Google, aby sprawdzić, czy takie podejście daje zamierzony efekt.
DOK
3
Adres URL w pytaniu to 404
Bryan Oakley,

Odpowiedzi:

111

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;}
marcgg
źródło
2
@MrBoJangles zaktualizował odpowiedź, aby użyć Twojego linku. Odpowiedź ma 4 lata, to był inny czas ^^
marcgg
1
Uwagi dla par: musisz określić górną i / lub lewą współrzędną, inaczej to nie działa. Uważaj również, jeśli chcesz, aby element div był widoczny na ekranie, ponieważ czasami strony internetowe nie zawsze pokazują „0,0” w lewym górnym rogu (nawet jeśli tak wygląda), możesz to sprawdzić na stackoverflow.com/q/ 3464876/32453 . Może być również konieczne ustawienie indeksu z, jeśli w pobliżu znajdują się inne elementy div z pozycją bezwzględną. Również jeśli istnieje opcja „pełnego ekranu”, Twój element DIV na górze może nie być wyświetlany, jeśli nie jest elementem potomnym elementu DIV „na pełnym ekranie”. GL!
rogerdpack
1
Ta odpowiedź: „Aby to działało, rodzic musi być względny”, następna odpowiedź „Upewnij się, że nie ma tagu nadrzędnego z pozycją: względna”. Ktoś się myli!
BJury
Czy nie ma sposobu, aby to zrobić position: sticky;? Mam pasek nawigacyjny, który chcę pozostać na miejscu podczas przewijania strony, a zmiana go na wartość bezwzględną zrujnowałaby to.
CorruptComputer
BJury, że źle to przeczytałeś. Pozycjonowany element div nie może być względny. Element div, w którym się znajduje, MUSI być względny.
John Lord
13

Posługiwać się

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

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

Jimmy Shelter
źródło
2
Może również wymagać użycia z-index.
stommestack
13

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

Projektowanie stron internetowych Mumbai
źródło
1

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.

Serpico
źródło
0

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.

roryf
źródło
0

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>
Pranesh Janarthanan
źródło