Place div element above page content

Question

I implemented a popup that dynamically displays search options. I want the box to "float" over the entire contents of the site. Currently, when a window is displayed, it shifts all the content below and looks bad.

I believe that I have already tried to set the z-index in the div field higher than the remaining content of the page, but still no luck.

Answer 1

You want to use absolute positioning .

An absolute position element is positioned relative to the first parent element, which has a position other than static. If such an element containing an HTML block

For example:

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

To make it work, the parent must be relative ( position:relative )

In your case, this should do the trick:

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

Answer 2

Using

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

To place a div. Make sure it does not have a parent tag with position: relative;

Answer 3

give z-index:-1 for the firmware and give z-index:100 div.

Answer 4

Yes, the higher the z-index, the better. It positions your content element on top of all other elements on the page. Say you have a z-index for some elements on your page. Look for the highest, and then enter a higher z index for your popup. Thus, it will flow even over other elements with a z-index. If you do not have a z-index in any element of your page, you must specify as z-index: 2; or something higher.

Answer 5

The results div container has position: relative , which means that it is still in the document flow and changes the arrangement of elements around it. To achieve a floating effect, you need to use position: absolute .

You should also check the markup used, you have phantom <li> without the container <ul> , you could replace both div#suggestions and div#autoSuggestionsList with one <ul> and get the desired result.