Làm nổi một div phía trên nội dung trang

Tôi đã triển khai một hộp bật lên hiển thị động các tùy chọn tìm kiếm. Tôi muốn hộp "nổi" trên tất cả nội dung trang web. Hiện tại, khi hộp được hiển thị, nó sẽ thay thế tất cả nội dung bên dưới nó và trông rất tệ.

Tôi tin rằng tôi đã thử đặt chỉ số z của div của hộp cao hơn chỉ số của nội dung trang còn lại, nhưng vẫn không thành công.

Bạn muốn sử dụng định vị tuyệt đối .

Một phần tử vị trí tuyệt đối được định vị so với phần tử mẹ đầu tiên có vị trí khác với vị trí tĩnh. Nếu không tìm thấy phần tử như vậy, khối chứa là html

Ví dụ :

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

Để làm cho nó hoạt động, cha mẹ cần phải tương đối ( position:relative)

Trong trường hợp của bạn, điều này nên thực hiện thủ thuật:

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

Sử dụng

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

Để định vị div. Đảm bảo rằng nó không có thẻ cha với vị trí: tương đối;

tặng z-index:-1cho flash và tặng z-index:100cho div ..

Đúng, chỉ số z càng cao càng tốt. Nó sẽ đặt phần tử nội dung của bạn lên trên mọi phần tử khác trên trang. Giả sử bạn có chỉ mục z cho một số phần tử trên trang của mình. Tìm giá trị cao nhất và sau đó đưa ra chỉ số z cao hơn cho phần tử bật lên của bạn. Bằng cách này, nó sẽ chảy thậm chí trên các phần tử khác có chỉ số z. Nếu bạn không có chỉ mục z trong bất kỳ phần tử nào trên trang của mình, bạn nên cung cấp như z-index: 2; hoặc cái gì đó cao hơn.

Div chứa kết quả có position: relativenghĩa là nó vẫn nằm trong luồng tài liệu và sẽ thay đổi bố cục của các phần tử xung quanh nó. Bạn cần sử dụng position: absoluteđể đạt được hiệu ứng 'nổi'.

Bạn cũng nên kiểm tra đánh dấu mà bạn đang sử dụng, bạn có phantom <li>với không có vùng chứa <ul>, bạn có thể thay thế cả div#suggestionsvà div#autoSuggestionsListbằng một thẻ duy nhất <ul>và nhận được kết quả mong muốn.

Đoạn mã dưới đây đang hoạt động,

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