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

Answer 2

Use

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

To position the div. Make sure it doesn't have a parent tag with position: relative;