Eu tenho uma pergunta sobre a tag âncora.

Eu tenho uma página como

<div id='header'>
    bunch of stuff….and iamges
</div>

<div>
   <a href='#test1>test1</a>
   <a href='#test2>test2</a>
   <a href='#test3>test3</a>
</div>

<div class='content'>
   <a name='test1'>test1 project</a>
   bunch of stuff

   <a name='test2'>test1 project</a>
   bunch of stuff

   <a name='test3'>test1 project</a>
   bunch of stuff
</div>

Meu css

#header{
  position: fixed;
  right: 0;
  left: 0; 
  z-index: 1030;
  margin-bottom: 0
 height:150px;
}

No entanto, parece que toda vez que eu clico em test1 para test3 link, meu div de 'contents' foi empurrado para o topo do meu cabeçalho div. então meu div 'conteúdo' é coberto pelo meu cabeçalho div (150px). Existe alguma maneira de corrigir meu problema? Muito obrigado!