Amenti

任意の要素を position: fixed として left, right, top, bottom といったプロパティ で位置指定すると特定位置の前面に固定する事が出来ます。 しかし、IEは position: fixed が効かないために実用出来ないという現状です。

そこで、JavaScriptを使ってIEは位置を固定させるよう考えていたのですが、色々 試しているとJavaScriptを使用しなくとも実現出来る事が分かりました。 実はこれ、CSS: 複数の背景画像のページを修正している 最中に思い付いたものです。(似ている部分ありますね) ところが、検索してみると同様の方法は結構知られているようでした・・・。

IEのみ body を overflow:hidden でスクロールバーを非表示にして、 代りに div で overflow:auto とすることでスクロールバーを表示させます。 そして、この div と body の隙間に position:fixed するものを置いて、 IEはこれを position:absolute にするとブラウザに対して上手く固定されます。

※ 標準準拠モードには対応していません。
※ 無料レンタルなどのホームページスペースで、ページ上部や下部に広告が 自動挿入される場合、広告が正しく表示されない可能性があります。
2007/08/24 <body scroll="no"> を body { overflow: hidden; } に 変更しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>前面に固定</title>
<style type="text/css"><!--
body {
margin: 0px;
padding: 0px;
}
#bg {
padding: 8px;
}
#fixed {
position: fixed;
left: 0px;
bottom: 0px;
z-index: 5;
opacity: 0.7;
}
--></style>
<!--[if IE]>
<style type="text/css">
body { overflow: hidden; }
#bg {
width: 100%;
height: 100%;
overflow: auto;
}
#fixed {
position: absolute;
filter: Alpha(opacity=70);
}
</style>
<![endif]-->
</head>
<body>
<div id="fixed">前面に固定されるボックス</div>
<div id="bg">

ページ内容

</div>
</body>
</html>
※ ブラウザのサイズに依ってスクロールバーの出てしまうようなページでは、 前面に表示させるものを右端や下端に沿わせる場合、IEではスクロールバーに 重なってしまいますので、bottomやrightにはスクロールバーの幅分(16px)を 指定するなどの工夫が要りそうです。
※ z-index: 5; はページ内にスタックレベルの大きい要素があった場合にも前面に なるよう適当に決めています。
※ 半透明にしないときはオレンジ色の部分を取り 除いてください。