絶対的な位置に固定配置する
position：fixed 絶対位置であることを示す top：距離 上からの距離 bottom：距離 下からの距離 left：距離 左からの距離 right：距離 右からの距離 「position：fixed」と距離を指定するプロパティは、指定された要素を絶対的に移動させて配置しますが、その要素はウィンドウ上のその位置に固定されて、スクロールしても位置が変わらなくなります。
この指定をされた要素は、通常の配置とは別に扱われるようになるため、他の要素の配置には一切影響を与えません。
topプロパティは上から親ボックスの上から指定した要素のボックスの上までの距離、bottomプロパティは親ボックスの指定から指定した要素のボックスの下までの距離、leftプロパティは親ボックスの左から指定した要素のボックスの左までの距離、rightプロパティは親ボックスの右から指定した要素のボックスの右までの距離を指定します。HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>絶対的な位置に固定配置する</title>
<style type="text/css">
<!--
body {
margin: 3em 0 1em;
color: #000000;
background: #ffffff url(grid.gif)
}
#navi {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 1em;
margin: 0;
padding: 0.5em;
text-align: center;
color: #ffffff;
background: #ffcc00;
}
h1, p {
margin-left: 20px;
margin-right: 20px;
}
-->
</style>
</head>
<body>
<h1>固定配置</h1>
<p>
上のナビゲーション・バー（背景が黄色の部分）は、ウィンドウの上部に固定されるため、スクロールしても常に同じ位置に表示されます。
</p>
<div id="navi">
<a href="prev.html">前</a> |
<a href="home.html">トップ</a> |
<a href="next.html">次</a>
</div>
<!-- スクロールさせるため -->
<p>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</p>
</body>
</html>
