在页面内容上方浮动div

我实现了一个popup框，dynamic显示search选项。 我希望这个盒子能够“漂浮”所有的网站内容。 目前，当显示该框时，它将取代下面的所有内容，看起来很糟糕。

我相信我已经试过把盒子的div的z-index设置在剩下的页面内容的上面，但是还是没有运气。

Answer 1

你想使用绝对定位 。

绝对位置元素相对于具有非静态位置的第一个父元素进行定位。 如果没有find这样的元素，则包含的块是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闪烁并给z-index:100到div ..

Answer 4

是的，Z指数越高越好。 它会将您的内容元素放置在页面上的每个其他元素之上。 假设你的页面上有一些元素有z-index。 寻找最高的，然后给你的popup式元素一个更高的Z指数。 这样，它甚至会在z-index的其他元素上stream动。 如果你的页面上没有任何元素的z-index，你应该像z-index：2; 或更高的东西。

Answer 5

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

你也应该检查你正在使用的标记，你有没有容器<ul>幻影<li> s，你可以用一个<ul>代替div#suggestions和div#autoSuggestionsList ，并得到想要的结果。