Eric Di Bari Eric Di Bari - 17 days ago 9
CSS Question

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.

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

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