将一个div浮动在页面内容之上

Question

我已经实现了一个弹出框，可以动态显示搜索选项。 我希望这个盒子能够"浮动"在所有站点内容上方。 目前，当弹出框显示时，它会将其下方的所有内容都移开，看起来很糟糕。

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

- Eric Di Bari

---

你可能想要谷歌搜索“lightbox”，看看这种方法是否能够给你想要的效果。 - DOK

问题中的URL返回404错误。 - Bryan Oakley

这个可以用：https://dev59.com/MWs05IYBdhLWcg3wIelj#72265300 - m4n0

Answer 1

您想要使用绝对定位。

绝对定位元素的位置是相对于第一个具有非静态定位的父级元素。如果没有找到这样的元素，则相对于包含块（即html）进行定位。

例如：

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

为了使其正常工作，父元素需要设置为相对定位（position:relative）

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

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

- marcgg

---

@MrBoJangles更新了答案并使用了你提供的链接。该答案已经有4年历史了，那时候是一个不同的时代^^ - marcgg

一些注意事项：您需要指定顶部和/或左侧坐标，否则似乎无法正常工作。此外，请注意，如果您希望您的div处于“屏幕上”，有时网页并不总是显示“0,0”作为当前左上角（即使看起来是这样），您可以通过https://dev59.com/aHA75IYBdhLWcg3wH1NB进行检查。如果周围有其他绝对定位的div，则还可能需要设置z-index。此外，如果有“全屏”选项，则如果不是“全屏”div的子元素，则可能不会显示您的“置顶div”。祝好运！ - rogerdpack

这个答案是：“要让它正常工作，父元素需要设为相对定位”。下一个答案是：“确保它没有带有position: relative的父级标签”。有人是错误的！ - BJury

有没有办法使用 position: sticky; 来实现这个效果？我有一个导航栏，希望在页面滚动时保持在原位，将其更改为绝对定位会破坏这一点。 - CorruptComputer

BJury，你读错了。你要定位的 div 不能是相对定位。它所在的 div 必须是相对定位。 - John Lord

Answer 2

使用

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

要定位这个 div，请确保它没有带有 position: relative 的父标签。

- Jimmy Shelter

---

可能需要使用 z-index。 - jobukkit

Answer 3

将 Flash 的 z-index 设置为-1，并将 z-index 设置为100的div。

- Web Design Mumbai

Answer 4

是的，z-index越高，越好。它将把您的内容元素置于页面上所有其他元素之上。 假设您在页面上为某些元素设置了z-index。查找最高的一个，然后为弹出元素赋予更高的z-index。这样，它甚至可以流过具有z-index的其他元素。 如果您的页面上没有任何元素的z-index，则应该给它一个像z-index:2;或更高的值。

- Serpico

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

- Pranesh Janarthanan

Answer 6

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

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

- roryf