Content pass over a fixed header

Question

In my html page, i fixed my header with :

Click to copy

position : fixed

When i scroll down, then content of my page pass over the header. How can i fix this?

Answer 1

Assuming your HTML is the following:

Click to copy

<div id="header">...</div>
<div id="content">...</div>

Try the following CSS:

Click to copy

<style type="text/css">
  #header {
    position:fixed;
    z-index:1;
  }
  #content {
    position:relative;
    z-index:2;
  }
 </style>