在页面内容上方浮动一个 div答案

【问题标题】：Float a div above page content在页面内容上方浮动一个 div
【发布时间】：2010-01-05 13:00:36
【问题描述】：

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

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

【问题讨论】：

您可能想在 Google 的“灯箱”中查看该方法是否为您提供了预期的效果。
问题中的 URL 给出了 404

标签： css z-index

【解决方案1】：

你想使用absolute positioning。

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

例如：

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

要让它工作，父母需要是相对的 (position:relative)

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

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

【讨论】：

@MrBoJangles 更新了答案以使用您的链接。答案是4岁，那是不同的时间^^
几个注意事项：您确实需要指定顶部和/或左侧坐标，否则这似乎不起作用。另外请注意，如果您希望您的 div 显示在“屏幕上”，有时网页并不总是将“0,0”显示为当前的左上角（即使看起来像这样），您可以使用stackoverflow.com/q/3464876/32453 进行检查。如果周围有其他绝对定位的 div，您可能还需要设置 z-index。此外，如果有“全屏”选项，如果不是“全屏”div 的子元素，您的“顶部 div”可能不会显示。 GL！
这个答案，“要让它工作，父母需要是相对的”，下一个答案是“确保它没有带有位置的父标签：相对”。有人错了！
position: sticky; 没有办法做到这一点吗？我有一个导航栏，我想在页面滚动时保持原位，将其更改为绝对会破坏它。
BJury 你读错了。您定位的 div 不能是相对的。它所在的 div 必须是相对的。

【解决方案2】：

使用

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

定位 div。确保它没有带有 position: relative;

的父标签

【讨论】：

可能还需要使用z-index。

【解决方案3】：

给z-index:-1给flash，给z-index:100给div..

【讨论】：

【解决方案4】：

是的，z-index 越高越好。它将您的内容元素放置在页面上所有其他元素的顶部。假设您对页面上的某些元素具有 z-index。寻找最高的，然后为您的弹出元素提供更高的 z-index。这样，它甚至会流过带有 z-index 的其他元素。如果页面上的任何元素中都没有 z-index，则应该给出 z-index:2;或更高的东西。

【讨论】：

【解决方案5】：

下面的代码正在运行，

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

【讨论】：

【解决方案6】：

结果容器 div 有position: relative 表示它仍在文档流中，并且会改变它周围元素的布局。您需要使用position: absolute 来实现“浮动”效果。

您还应该检查您正在使用的标记，您有没有容器 <ul> 的幻像 <li>s，您可以将 div#suggestions 和 div#autoSuggestionsList 替换为单个 <ul> 并获得想要的结果。

【讨论】：