あるウェブサイトを閲覧中、スクロールしてページの途中にあるリンクから別のページを表示し、ブラウザの「戻る」を使って戻ってみると、ページの一番上に戻されてしまう──。
　ページの途中を見ていて「更新」すると、いつもページの一番上まで戻されてしまう──。

　リンク集など、「リンクをクリック→ブラウザの戻るボタンで戻る」、という操作を繰り返すことが多い場合、この現象は非常にわずらわしく、いちいちページをスクロールするのにイライラしてしまう人もいるでしょう。

　読み込みのたびにページの一番上まで戻ってしまうのは、ブラウザの仕様（不具合）である場合もありますが、そのページに使われているスタイルシート（CSS）が原因であることもあります。

　たとえばブログのレイアウトによくある、ページの上部に横長のタイトルがあり、その下に、左側にメニュー、右側に記事本文というページがあるとします。
　全体とタイトルの横幅（width）が800px、メニューが200px、本文が600pxとなっていて、それぞれIDがtitle、menu、honbunだとします。
　それがHTMLで
<div id="title">
<div id="honbun">
<div id="menu">
　という順番で記述されているとしましょう。このままではタイトルの下に本文、本文の下にメニューが縦に並ぶだけで左右のレイアウトにならないので、スタイルシートを使って指定する必要があります。
　それがCSSでは、titleはともかく、
#honbun {
　　position:absolute;
　　width:600px;
　　top:略;
　　left:200px;
}

#menu {
　　position:absolute;
　　width:200px;
　　top:略;
　　left:0px;
}
　となっている場合があるのです。これでもレイアウトできますが、実はposition:absoluteというのが曲者です。

　absoluteは絶対的な配置で、html要素を基準とした──つまりページの最上部からの──距離を指定した要素（ボックス）になります。そのため、このページを更新したり別のページから移動したりすると、いつもページの一番上に戻ってきてしまうのです。


　どうすればよいのかというと、テーブルを使う手もありますが、floatを使ってボックスを回り込ませるのが一番いいと思います。
#honbun {
　　float:left;
　　width:600px;
　　margin-left:200px;
}

#menu {
　　float:left;
　　width:200px;
　　margin-left:-800px;
}
　と、このようになります。メニューの左マージンをマイナス800pxにするところがポイントです。