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.
Odpowiedzi:
Chcesz użyć pozycjonowania bezwzględnego .
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;}
źródło
position: sticky;
? Mam pasek nawigacyjny, który chcę pozostać na miejscu podczas przewijania strony, a zmiana go na wartość bezwzględną zrujnowałaby to.Posługiwać się
position: absolute; top: ...px; left: ...px;
Aby ustawić div. Upewnij się, że nie ma tagu nadrzędnego z pozycją: względna;
źródło
z-index
.daj
z-index:-1
do flashowania i dajz-index:100
do div ..źródło
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.
źródło
Element div kontenera wyników
position: relative
oznacza, że nadal znajduje się w obiegu dokumentów i zmieni układ otaczających go elementów. Musisz użyć,position: absolute
aby uzyskać efekt „unoszenia się”.Powinieneś również sprawdzić znaczniki, których używasz, masz fantomy
<li>
bez kontenera<ul>
, prawdopodobnie mógłbyś zamienić obadiv#suggestions
idiv#autoSuggestionsList
na pojedynczy<ul>
i uzyskać pożądany rezultat.źródło
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>
źródło