CSS div problems with position

Question

I have a css based asp.net masterpage. I am using a browse div located directly above a navigation div. The browse div is flowing down behind the navigation div. I did some playing around with the position and found that if i change the navigation position it fixes it, but everything in that div moves half way down the page. I have done some googleing and cant find anything about how to force a div to always be on top. If you need more info I can provide it.

I have pasted select parts of the css code below:

#header2 {
height: 2.5em;
border-bottom: 1px dashed #0055a5;
color: #FFF;
background-color: white;
}

#header2 .browse {
color: #000000;
background-color: transparent;
float: left;
margin-left: 1em;
margin-top: .1em;
font-weight:bold;
font-style: normal;
font-variant: normal;
font-size: 70%;
line-height: normal;
font-family: Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
width: 144px;
position: fixed; 
}

#navigation 
{
background-color: white;
width: 200px;
height:100%;
top: 105px;
left: 0em;
width: 13em; 
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size:90%;
}

Answer 1

If you want it to stay fixed at the very top of the page, you could try setting top: 0; on the .browse class. Also see if it is the actual <div> tag that it is positioned vertically centered, or if it's just its contents.

I bet you'll save some time experimenting if you use firebug - go get it if you don't have it already =)

Answer 2

By top, do you mean the top of the viewport, or top of the stack (i.e., z-index?).

If you mean top of the viewport, try position:fixed;

Edit, reading again, I think you mean z-index. Set the position of the element you want to keep on top (browse?) to relative, and then set the z-index to something like 100, i.e.,

position:relative;z-index:100;

that should do the trick.