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.

You might want to Google "lightbox" to see if that approach gives you the intended effect. — DOK, Jan 05 '10 at 13:14
This would work: https://stackoverflow.com/a/72265300/4813913 — m4n0, May 16 '22 at 20:34

marcgg · Accepted Answer · 2014-01-29T10:35:01.147

131

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

edited Jan 29 '14 at 10:35

answered Jan 05 '10 at 13:07

marcgg

65,020
52
178
231

2

@MrBoJangles updated the answer to use your link. The answer is 4 years old, it was a different time ^^ – marcgg Jan 29 '14 at 10:35
1

Couple notes: you do need to specify a top and/or left coordinate or this doesn't seem to work. Also beware if you want your div to be "on screen" that sometimes webpages aren't always showing "0,0" as the current top left (even if it looks like they are) you can check with http://stackoverflow.com/q/3464876/32453. You also may need to set a z-index if there are other absolute positioned divs around. Also if there is a "full screen" option your "on top div" might not be shown if not a child element of the "full screened" div. GL! – rogerdpack Oct 14 '16 at 07:23
1

This answer, "To get it to work, the parent needs to be relative", next answer "Make sure it doesn't have a parent tag with position: relative". Someone is wrong! – BJury Aug 02 '17 at 16:23
1

Is there no way to do this with `position: sticky;`? I have a nav bar that I want to stay in place when the page scrolls, and changing it to absolute would ruin that. – CorruptComputer Feb 22 '18 at 17:48
BJury you read it incorrectly. The div you are positioning can not be relative. The div it is inside MUST be relative. – John Lord Apr 30 '19 at 20:42

score 18 · Answer 2 · answered Jan 05 '10 at 13:03

18

Use

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

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

answered Jan 05 '10 at 13:03

Jimmy Shelter

1,540
9
13

2

May need to use `z-index` as well. – jobukkit Nov 08 '16 at 10:51

score 16 · Answer 3 · edited Dec 04 '11 at 05:51

16

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

edited Dec 04 '11 at 05:51

animuson

53,861
28
137
147

answered Jan 21 '11 at 09:13

Web Design Mumbai

161
1
2

score 3 · Answer 4 · answered Jun 08 '11 at 14:08

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.

score 1 · Answer 5 · answered Mar 16 '19 at 09:52

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 class="col-lg-12 col-md-12">
   <div class="col-lg-8 col-md-8" >
    //My scrollable content is here
   </div>
   //This below panel will float while scrolling the above div content
   <div class="col-lg-4 col-md-4" id="MyFloatPanel">
    <div class="row">
     <div class="panel panel-default">
      <div class="panel-heading">Panel Head </div>
     <div class="panel-body ">//Your panel content</div>
   </div>
  </div>
 </div>
</div>

score 0 · Answer 6 · answered Jan 05 '10 at 13:08

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.

Float a div above page content

6 Answers6

Linked

Related