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.

6 Answers

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

Use

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

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

give z-index:-1 to flash and give z-index:100 to div..

Yes, the higher the z-index, the better. It will position your content element on top of every other element on the page. Say you have z-index to some elements on your page. Look for the highest and then give a higher z-index to your popup element. This way it will flow even over the other elements with z-index. If you don't have a z-index in any element on your page, you should give like z-index:2; or something higher.

The below code is working,

<style> .PanelFloat { position: fixed; overflow: hidden; z-index: 2400; opacity: 0.70; right: 30px; top: 0px !important; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } </style> <script> //The below script will keep the panel float on normal state $(function () { $(document).on('scroll', function () { //Multiplication value shall be changed based on user window $('#MyFloatPanel').css('top', 4 * ($(window).scrollTop() / 5)); }); }); //To make the panel float over a bootstrap model which has z-index: 2300, so i specified custom value as 2400 $(document).on('click', '.btnSearchView', function () { $('#MyFloatPanel').addClass('PanelFloat'); }); $(document).on('click', '.btnSearchClose', function () { $('#MyFloatPanel').removeClass('PanelFloat'); }); </script> <div> <div > //My scrollable content is here </div> //This below panel will float while scrolling the above div content <div> <div> <div> <div>Panel Head </div> <div>//Your panel content</div> </div> </div> </div> </div> 

The results container div has position: relative meaning it is still in the document flow and will change the layout of elements around it. You need to use position: absolute to achieve a 'floating' effect.

You should also check the markup you're using, you have phantom <li>s with no container <ul>, you could probably replace both the div#suggestions and div#autoSuggestionsList with a single <ul> and get the desired result.