Question

Since i won’t be able to post an image here’s the link to it

https://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

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/