html - CSS Divs overlapping, how do I force one above the other?

Question

I'm new to CSS and trying to build my site. I'm coming across a problem. I've created a div with a fixed position, however it is appearing below other elements on the site. How do I force it to the top?

div#floater {
    position: fixed; 
    top: 420px; 
    left: -110px;   
}

div#floater:hover {
    left: 0;

The site can be found at goinnativerecords.com (hover over the images to the side). I know my coding isn't the cleanest (tips are appreciated).

Thanks!

question from:https://stackoverflow.com/questions/6354149/css-divs-overlapping-how-do-i-force-one-above-the-other

Answer 1

simply use z-index:

z-index : 1;

Note that z-index only works on elements that have some kind of positioning set (relative, absolute, fixed)

nuances:

Elements with a higher z-index will appear in front of elements with a lower z-index in the same stacking context. If two elements have the same z-index, the latter one appears on top. Stacking context is defined by:

• The Document Root
• Elements with position: absolute or position: relative and a z-index
• Elements that are partially transparent, that is they have an opacity < 1
• In IE7, any element with position: absolute or position: relative (this can cause many bugs since it is the only browser that acts this way)

If IE7 is an issue, you can make all browsers behave the same by always adding z-index : 1 to any element that also has some position set.