Float a Div Above Page Content

Float a div above page content

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

How do I make a div that floats above all the other content in HTML with CSS?

Please refer the example below:

<div class="container">
    <div class="floating">Floating Div</div>
    <div>
        <p>Para Text Goes Here</p>
        <p>More Text</p>
    </div>
</div>

here is your CSS:

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.floating {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: grey;
}

Things to do:

The use of POSITION:RELATIVE on container and POSITION:ABSOLUTE on floating div

please have a look at the working example : http://jsfiddle.net/tH84L/

Hope it works for you!

Floating Div above content

You want the search parent div to be {position: relative}, and the search results child div to be {position: absolute}. The search results, being positioned absolutely, will be pulled out of the regular flow and be placed at the top left of the first parent div that is positioned relatively.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Float a DIV on top of another DIV

Just add position, right and top to your class .close-image

.close-image {
   cursor: pointer;
   display: block;
   float: right;  
   z-index: 3;
   position: absolute; /*newly added*/
   right: 5px; /*newly added*/
   top: 5px;/*newly added*/
}

Make one div float over another?

Use position:absolute; and set the "popup" one to be positioned within the boundaries of the other. The "popup" div should likely also be smaller.

Use z-index to stack the "popup" one above the other one (give it a higher value for z-index).

If you want to make it look like the inner div is really floating above the other one, create a shadow with something like border-right:2px solid black and border-bottom:2px solid black.

If you want to make it actually pop up/appear/disappear, you will need to use some script.

CSS I want a div to be on top of everything

In order for z-index to work, you'll need to give the element a position:absolute or a position:relative property. Once you do that, your links will function properly, though you may have to tweak your CSS a bit afterwards.

Floating div over other divs not working with z-index

#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: absolute;
float: left;
background-color: #ccc;
}

Set your white_box position to absolute and then adjust it's height and width, according to your goals.

Make a span float over floating div

Yep you have to use absolute positioning on the span and the div, with bigger z-index property for the span.

Something like that :

body {      position: relative;    }        span {       display: block;      position: absolute;      width : 100px;      height: 100px;      z-index: 2;      background: blue;      text-align: center;    }        div {      position: absolute;      top: 0;      left: 0;      width: 100%;      z-index: 1;      background: red;      text-align: center;    }

<body><span>TEST OVERLAY</span><div class="catalogItemOuter 5225" style="float: left; height: 247px; visibility: visible;">DIV CONTENTS  </div></body>

Float a Div Above Page Content