HTML, CSS Header Assistance - css

Question

Since i won't be able to post an image here's the link to it
http://i.stack.imgur.com/LxO1e.png
I have this website, the PHP and all other stuff are working. The problem is that when I scroll up to see other stuff below, the elements that get scrolled up goes over the header instead of going under. How do I solve this?
I can't seem to post the HTML in here, I tried the indent four spaces thing but it doesn't work with HTML stuff so instead here is the site: pageboost.comze.com
Here's the css for the main that is going over instead of under
.inmain
{
width:95%;
height:100%;
left:20px;
top:42px;
position:relative;
}
and here's the css for the header
.header
{
background-color:#ffd800;
width:100%;
height:42px;
position:fixed;
left:0px;
top:0px;
-webkit-box-shadow: 0 5px 6px -6px black;
-moz-box-shadow: 0 5px 6px -6px black;
}

Answer 1

You have to define z-index with one these positions relative,absolute or fixed.
For example write like his:
.header{
position:fixed;
z-index:1;
}

Answer 2

just define z-index value into your Header class or Id where you have defined the position.
It happens so when you will give the z-index value i hope that will work smoothly.....
UPDATED ANSWER
I have given the z-index value in header class its working fine now please check it.....
HTML
<div class="header"></div>
<div class="inmain">afdadfasf</div>
CSS
.header
{
background-color:#ffd800;
width:100%;
height:42px;
position:fixed;
left:0px;
top:0px;
-webkit-box-shadow: 0 5px 6px -6px black;
-moz-box-shadow: 0 5px 6px -6px black;
z-index:1;
}
.inmain
{
width:95%;
height:100%;
left:20px;
top:35px;
position:relative;
}
for better understanding see the live demo:- http://jsfiddle.net/X8vpg/6/