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

User · Answer

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

User · Answer

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  lt li gt s with no container  lt ul gt   you could probably replace both the div suggestions and div autoSuggestionsList with a single  lt ul gt  and get the desired result

User · Answer

The below code is working      lt style gt       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         lt  style gt    lt script gt     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            lt  script gt     lt div class  col-lg-12 col-md-12  gt      lt div class  col-lg-8 col-md-8   gt        My scrollable content is here     lt  div gt       This below panel will float while scrolling the above div content     lt div class  col-lg-4 col-md-4  id  MyFloatPanel  gt       lt div class  row  gt        lt div class  panel panel-default  gt         lt div class  panel-heading  gt Panel Head  lt  div gt        lt div class  panel-body   gt   Your panel content lt  div gt      lt  div gt     lt  div gt    lt  div gt   lt  div gt

User · Answer

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

User · 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

User · Answer

Use  position  absolute  top     px  left     px    To position the div  Make sure it doesn t have a parent tag with position  relative

[css] Float a div above page content

Examples related to css

Examples related to z-index