IE7で使えるようになるもののひとつに、position:fixedがある。FirefoxやOperaやSafariではあたりまえのように使えたのだが、これまではIE6で使えなかったためにあまり利用されていなかった。が、今後はどんどん利用頻度が上がり、また便利なテクニックも開発されていくのだろう。
position: fixedを使って便利になるのは、メニューの固定もそうだが、画面の下部に固定された「ページの先頭へ」ボタンなんじゃないの？と思って、以前サンプルで紹介した。だが、まだまだ利用例が少ないようなので、プッシュするために個別に説明する。
サンプルを参照されたい。HTMLのソースはスクロールできるように長くしてあるが、実際使っているのはid="title"をつけたh1（先頭行）と、一番下の
<p id="totop"><a href="#title">▲ページの先頭へ</a></p>のみである。CSSが適用されない場合でも、「▲ページの先頭へ」をクリックすれば先頭行に行くことをまず確認しよう。
CSSは以下のとおり。
html>body #totop {
position: fixed;
bottom: 0;
left: 0;
margin: 0;
width: 760px;
height: 6px;
background-image: url(images/backgotop.png);
background-repeat: no-repeat;
}
html>body #totop a {
display: block;
margin: -24px 20px 0 606px;
width: 134px;
padding-top: 30px;
background-image: url(images/backgotopa.png);
background-repeat: no-repeat;
}IE6ではposition: fixedが使えないので、適用されないように、子供セレクタ（大なり、>）を用いる。結果、IE6だとただのp要素として扱われる。
IE7やその他のモダンブラウザでは、まずp要素で幅760px、高さ6pxの青い横棒を作り、position:fixedを用いて画面の一番下に固定表示させている。中のa要素でボタン部を作り、マイナスの上marginを使って横棒の上にはみださせている。さらに、文字を画面外に消し飛ばすために上paddingを設定している。
いくつか注意点を。
今のバージョンだと、画像表示がoff、CSSがonだとボタンが消え、また文字も表示されなくなってしまう。こだわるのならば、何かする必要がある。ADP: ADPでのCSSロールオーバーみたいな話だ。
実用を考えるならば、本文の一番下の文章が横棒やボタンによって隠れてしまわないように、本文の最下行に下paddingを設定するなど、何かをする必要がある。このサンプルでは面倒なのでしていない。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/601