浮动页面内容的div [英] Float a div above page content

问题描述

我实现了一个动态显示搜索选项的弹出框。我想让框浮动所有的网站内容。目前，当框被显示时，它移位其下面的所有内容，看起来不好。

I've implemented a popup box that dynamically displays search options. I want the box to "float" above all of the site content. Currently, when the box is displayed it displaces all of the content below it and looks bad.

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

I believe I've already tried setting the z-index of the box's div to above that of the remaining page content, but still no luck.

推荐答案

您要使用绝对定位。

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

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html

例如：

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

要使其工作，父代需要是相对的$ c> position：relative ）

To get it to work, the parent needs to be relative (position:relative)

在你的情况下，这应该做的诀窍：

In your case this should do the trick:

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

这篇关于浮动页面内容的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！