Search code examples
cssz-index

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.

Solution

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