HTML, CSS Header Assistance

Question

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

https://i.sstatic.net/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;
}

It is impossible to solve anything if you don't provide some code — cen
– cen, Commented May 21, 2012 at 4:56
you can post your code than you will get exact solution of your bug.... — Shailender Arora
– Shailender Arora, Commented May 21, 2012 at 5:09

sandeep · Accepted Answer · 2012-05-21 05:08:13Z

3

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

edited May 21, 2012 at 5:08

answered May 21, 2012 at 5:03

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Question Man Over a year ago

Thanks guys! You've help me greatly ever since.

Shailender Arora · Accepted Answer · 2012-05-21 05:15:35Z

0

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/

edited May 21, 2012 at 5:15

answered May 21, 2012 at 5:06

Shailender Arora

7,8182 gold badges34 silver badges35 bronze badges

1 Comment

Question Man Over a year ago

Thanks guys! You've help me greatly ever since.

Collectives™ on Stack Overflow

HTML, CSS Header Assistance

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related