Question

我已经实现了一个动态显示搜索选项的弹出框。我希望该框能够“浮动”在所有网站内容之上。目前，当显示该框时，它取代了它下面的所有内容并且看起来很糟糕。

我相信我已经尝试将盒子div的z-index设置为高于剩余页面内容的z-index，但仍然没有运气。

Answer 1

绝对位置元素是相对于第一个定位有位置的父元素除了静态。如果没有这样的元素被发现，包含块是 HTML

例如：

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

要使其工作，父母需要是亲戚（position:relative）

在你的情况下，这应该可以解决问题：

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

Answer 2

使用

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

定位div。确保它没有位置为：relative;

的父标记

Answer 3

将z-index:-1设为Flash并将z-index:100提供给div ..

Answer 4

是的，z指数越高越好。它会将您的内容元素置于页面上的每个其他元素之上。假设您对页面上的某些元素有z-index。查找最高值，然后为弹出元素提供更高的z-index。这样它甚至会在z-index上流过其他元素。如果你的页面上的任何元素都没有z-index，你应该给出像z-index：2;或更高的东西。

Answer 5

结果容器div具有position: relative，这意味着它仍然在文档流中，并将更改其周围元素的布局。您需要使用position: absolute来实现“浮动”效果。

你还应该检查你正在使用的标记，你有没有容器<li>的幻像<ul>，你可以替换div#suggestions和div#autoSuggestionsList一个<ul>并获得所需的结果。

Answer 6

下面的代码有效，

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

将div放在页面内容之上

6 个答案: