Z-Indexing Floating Divs

CSS Floating with Overlap

z-index property will not apply to statically positioned elements. In order to use z-index the CSS must also include any position value other than static (ie relative, absolute, fixed).

.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }

Will give you what you want I think. I added position: relative; and changed the z-index of the .left to 3 (from 2) and changed the z-index of .right to 2 (from 3).

z-indexing floating divs

You need to set the position property. Adding position:relative to #menu displays the menu div above thumbs.

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.

z-index doesn't work with floating div

Try setting a negative right margin of -18px on the hovered cell (100-82=18):

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
    margin-right: -18px;
}

Working example

aligning divs using float and z-index

You are missing two things, in order to absolutely position elements position:relative , they must be included inside a position relative wrapper. also it seems that since the element don't have a defined hight they collapse.

Please see attached fiddle.
http://jsfiddle.net/4TCJ9/

z-index and float: right not playing well together

z-index only works on positioned elements (i.e a value other than static, which is the default). Add position:relative to your .dismiss class and you can click the element:

.dismiss {
    margin-top:1px;
    margin-right:1px;
    display: inline-block;
    float: right;
    position:relative;
    z-index: 9999;
    cursor: hand;
    cursor: pointer;
}

jsFiddle example

Then, to get your notify icon on the same line, re-order your HTML to:

<div class="notifyLeft">
    <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Button-Info-icon.png" style=" display: block;">
</div>
<div class="notifyRight">
    <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Button-Info-icon.png" style=" display: block;">
</div>
<div class="notifyCenter">
    <img src="http://icons.iconarchive.com/icons/fasticon/cat/128/Cat-Black-White-icon.png" />
</div>

jsFiddle example

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