Position fixed Demo

<header> と <footer> に position:fixed を指定しています

<header> と <footer> に position:fixed を指定しているため。
このページをスクロールしても、<header> と <footer> は固定されています。

このページのHTML抜粋

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Position fixed Demo：ほんっとにはじめてのHTML5とCSS3</title>
    <!--中略-->
</head>

<body>
 <header>
  <h1><a href="#">Position fixed Demo</a></h1>
  <nav>
   <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MENU1</a></li>
    <li><a href="#">MENU2</a></li>
    <li><a href="#">MENU3</a></li>
    <li><a href="#">MENU4</a></li>
   </ul>
  </nav>
 </header>

 <div id="container">
    <!--中略-->
 </div>

 <footer>
  <small>Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.</small>
 </footer>

</body>
</html>

このページのCSS抜粋

header, footer {
    width:100%;
    position:fixed;
    background:rgba(0,0,0,.5);
    color:#fff;
    z-index:1}
header {
    top:0;
    padding:10px}
footer {
    bottom:0;
    padding:3px}

★このページのCSSを見る（CSSファイルが別ウィンドウで開きます）

ページ内リンクでのズレを解消

ここで、最初のセクションにページ内リンクをしてみます→「最初のセクションへ」
なんか変ですね。<header>要素を固定位置指定したために、その分ズレてます。

ではちょっとこのまま　↓下の方にスクロールしてもらって...

今度はうまくいきました。
固定位置指定された <header>に隠れていませんね。
これは、下記のように、<header>の高さ分を足した「ネガティブマージン + padding」の組み合わせで指定しています。

#section2 {  /*←リンク先に指定したidです*/
    margin-top:-75px;
    padding-top:75px}
    /*このページの場合、<header>の高さは55px。
    セクションの上マージンは20pxにしたいので合計75pxで調整しています*/