페이지 콘텐츠 위에 div 플로팅

검색 옵션을 동적으로 표시하는 팝업 상자를 구현했습니다. 상자가 모든 사이트 콘텐츠 위에 "부동"하기를 원합니다. 현재 상자가 표시되면 그 아래에있는 모든 콘텐츠가 표시되지 않고보기에 좋지 않습니다.

이미 상자 div의 Z- 색인을 나머지 페이지 콘텐츠보다 높게 설정하려고 시도했지만 여전히 운이 없습니다.

절대 위치 지정 을 사용하려고합니다 .

절대 위치 요소는 정적 위치가 아닌 첫 번째 상위 요소를 기준으로 배치됩니다. 그러한 요소가 없으면 포함하는 블록은 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>