css - Float a div above page content

Question

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.

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.

Answer 1

You want to use absolute positioning.

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

For instance :

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

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