Fixed Header

[rrlogu]

Hi,

I'm trying to keep my header fixed with the below code. My header is fixed however when I scroll the page the contents are overrolling on the header and it looks odd since my entire page is of white background, I can't change the background color, any help.

<style type="text/css">
body { margin:100px 0px 0px 0px;}

div#topdiv {
      position:fixed;
      top:0px;
      left:0px;
      width:100%
}
</style>

<div id="topdiv">Heading</div>
<p>
content<br>
content<br>
content<br>
.....
</p>

[JorgeM]

I can't change the background color,

Why arent you able to apply a background color to the div? Is it because you have no access to the style sheet? If that is the problem, do you have access to the HTML where you can just apply an inline style instead?

[rrlogu]

I have access to style sheet, but the web page itself designed to have the background as white for standards.

[imBaCodes]

CSS RESET
I think you need this. It will help you solve problems like this.

Happy coding.

[JorgeM]

So why don't you at least apply a white background to the div?

[stevelg]

Overlapping elements in html is handled by the z-index which is automaticaaly assigned (in order of declaration) by the browser unless you state otherwise. Try;

#topdiv {position:fixed;
z-index:1;
...
...
}

You may need a higher value or specify the z-index for the body as 0. If both still show you need an opaque background.

[JorgeM]

You may need a higher value or specify the z-index for the body as 0. If both still show you need an opaque background.

The div is still a transparent element so a background color is needed. Since rrlugo indicated the site must be white, then I would say that a white background should be applied.