절대 위치 지정 을 사용하려고합니다 .
절대 위치 요소는 정적 위치가 아닌 첫 번째 상위 요소를 기준으로 배치됩니다. 그러한 요소가 없으면 포함 블록은 html입니다.
예 :
.yourDiv{
position:absolute;
top: 123px;
}
작동하려면 부모가 상대적이어야합니다 ( position:relative).
귀하의 경우 이것은 트릭을 수행해야합니다.
.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}
사용하다
position: absolute;
top: ...px;
left: ...px;
div를 배치하려면. position : relative; 상위 태그가 없는지 확인하십시오.
-------------------줄 z-index:-1깜박주고 z-index:100DIV에 ..
예, Z- 색인이 높을수록 좋습니다. 페이지의 다른 모든 요소 위에 콘텐츠 요소를 배치합니다. 페이지의 일부 요소에 Z- 색인이 있다고 가정 해 보겠습니다. 가장 높은 값을 찾은 다음 팝업 요소에 더 높은 Z- 색인을 제공합니다. 이렇게하면 Z- 색인이있는 다른 요소 위로도 흐르게됩니다. 페이지의 요소에 Z- 색인이없는 경우 z-index : 2와 같이 지정해야합니다. 또는 더 높은 것.
-------------------결과 컨테이너 div position: relative는 여전히 문서 흐름에 있으며 주변 요소의 레이아웃을 변경한다는 것을 의미합니다. position: absolute'부동'효과를 얻으려면 을 사용해야 합니다.
또한 사용중인 마크 업을 확인해야합니다. <li>컨테이너가없는 phantom이 있습니다 <ul>. div#suggestions및 div#autoSuggestionsList을 모두 단일로 대체 <ul>하고 원하는 결과를 얻을 수 있습니다.
아래 코드가 작동 중입니다.
<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>
출처
https://stackoverflow.com/questions/2006134